vue实现轮播图效果
时间：2024-04-03 13:20:44 来源：网络cs 作者：亙句 栏目：数据分析 阅读：
1,实现轮左右按键轮播效果，采用数组下标指定轮播图片，定义一个dindex与index下标相比较。 2，创建轮播的图片的数组 3，实现下方圆点点击轮播图片，采用动态绑定和数组的动态样式实现未点击的白色和点击的黑色 dindex与index相比较两值相不一致就是白色反之为黑色 4，实现图片定时轮播，创建定时器，将方法放入mounted生命周期中使其定时轮播，点击按钮轮播时清除定时器
5，实现鼠标移入移出左右切换图片按钮的样式切换，使用css3中的：hover的样式
一，body， HTML代码
<body> <div id="box"> <button id="left" @click="left">//左侧点击按钮 < </button> <img id="img":src="img[dindex]" >//轮播的图片采用动态绑定渲染 <button id="right" @click="right"> > </button> <ul> //采用v-for循环实现圆点的动态个数渲染 <li v-for="(item,index) in img.length" @click="yuan(index)"> //不同图片的渲染 <img :src="index===dindex?'./圆点 .png':'./圆点2.png'" alt=""> </li> </ul> </div></body二，css样式
<style>//轮播图片的位置 #box{ position: fixed; top: 100px; right: 150px; } #img{ height: 580px; width: 1200px; } button{ font-size: 50px; height: 60px; width: 100px; //按钮透明度设置 opacity: 0.2; //按钮圆角设置 border-top-left-radius: 20%; border-top-right-radius: 20%; border-bottom-left-radius: 20%; border-bottom-right-radius: 20%; } //鼠标移入样式 button:hover{ background-color: darkslategray; } #left{ position: fixed; top: 350px; left: 187px; } #right{ position: fixed; top: 350px; right: 150px; } ul{ list-style: none; position: fixed; top: 620px; left: 700px; } li{ font-size: 10px; display:inline; } li img{ height: 40px; width: 40px; }</style>
三，script功能实现代码
<script> new Vue({ el:"#box", data:{ //定义图片数组 img:["./nba1.png", "./nba2.png", "./nba3.png","./nba4.png","./nba5.png","./nba.png" ], //图片下标 dindex:0, //定时器设定 timer:null }, methods:{ //右侧点击按钮 right(){ clearInterval(this.timer) if(this.dindex<this.img.length-1){ this.dindex++ }else if(this.dindex==this.img.length-1){ this.dindex=0 } console.log(this.dindex) }, //左侧点击按钮 left(){ clearInterval(this.timer) if(this.dindex>0){ this.dindex-- }else if(this.dindex==0){ this.dindex=this.img.length-1 } // console.log(this.dindex) }, //圆角点击实现轮播效果 yuan(index){ clearInterval(this.timer) this.dindex=index console.log(index,this.dindex) }, //定时器设置 starInterval(){ clearInterval(this.timer); this.timer==setInterval(()=>{ this.dindex++ if(this.dindex>this.img.length-1){ this.dindex=0 } },3000) }, }, //将定时器放入mounted生命周期中 mounted(){ this.starInterval() } })</script>四，整体代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./node_modules/vue/dist/vue.js"></script></head><style> #box{ position: fixed; top: 100px; right: 150px; } #img{ height: 580px; width: 1200px; } button{ font-size: 50px; height: 60px; width: 100px; opacity: 0.2; border-top-left-radius: 20%; border-top-right-radius: 20%; border-bottom-left-radius: 20%; border-bottom-right-radius: 20%; } button:hover{ background-color: darkslategray; } #left{ position: fixed; top: 350px; left: 187px; } #right{ position: fixed; top: 350px; right: 150px; } ul{ list-style: none; position: fixed; top: 620px; left: 700px; } li{ font-size: 10px; display:inline; } li img{ height: 40px; width: 40px; }</style><body> <div id="box"> <button id="left" @click="left"><</button> <img id="img":src="img[dindex]" alt="" @mouseenter="zymInter(true)" @mouseleave="zymInter(false)"> <button id="right" @click="right">></button> <ul> <li v-for="(item,index) in img.length" @click="yuan(index)"><img :src="index===dindex?'./圆点 .png':'./圆点2.png'" alt=""></li> </ul> </div></body><script> new Vue({ el:"#box", data:{ img:["./nba1.png", "./nba2.png", "./nba3.png","./nba4.png","./nba5.png","./nba.png" ], dindex:0, timer:null }, methods:{ right(){ clearInterval(this.timer) if(this.dindex<this.img.length-1){ this.dindex++ }else if(this.dindex==this.img.length-1){ this.dindex=0 } console.log(this.dindex) }, left(){ clearInterval(this.timer) if(this.dindex>0){ this.dindex-- }else if(this.dindex==0){ this.dindex=this.img.length-1 } // console.log(this.dindex) }, yuan(index){ clearInterval(this.timer) this.dindex=index console.log(index,this.dindex) }, starInterval(){ clearInterval(this.timer); this.timer==setInterval(()=>{ this.dindex++ if(this.dindex>this.img.length-1){ this.dindex=0 } },3000) }, }, mounted(){ this.starInterval() } })</script></html>
本文链接：https://www.kjpai.cn/news/2024-04-03/153272.html，文章来源：网络cs，作者：亙句，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。