1,实现轮左右按键轮播效果，采用数组下标指定轮播图片，定义一个dindex与index下标相比较。 2，创建轮播的图片的数组 3，实现下方圆点点击轮播图片，采用动态绑定和数组的动态样式实现未点击的白色和点击的黑色 dindex与index相比较两值相不一致就是白色反之为黑色 4，实现图片定时轮播，创建定时器，将方法放入mounted生命周期中使其定时轮播，点击按钮轮播时清除定时器

5，实现鼠标移入移出左右切换图片按钮的样式切换，使用css3中的：hover的样式

一，body， HTML代码

//轮播的图片采用动态绑定渲染
    //采用v-for循环实现圆点的动态个数渲染
  • //不同图片的渲染
</body

二，css样式

//轮播图片的位置#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;}

三，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.dindex0){this.dindex--}else if(this.dindex==0){this.dindex=this.img.length-1}// console.log(this.dindex)},//圆角点击实现轮播效果yuan(index){clearInterval(this.timer)this.dindex=indexconsole.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() }})

四，整体代码

Document#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;}
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.dindex0){this.dindex--}else if(this.dindex==0){this.dindex=this.img.length-1}// console.log(this.dindex)},yuan(index){clearInterval(this.timer)this.dindex=indexconsole.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() }})