本人刚学习vue,用vue做了个图片轮播，下面我来记录一下,有需要了解VUE开发一个图片轮播的组件的朋友可参考。希望此文章对各位有所帮助。
完成效果图如下：
vue开发的思路主要是数据绑定，代码如下：
<template> <div ref="root"> <div :class="{transitionAni:ani}" :style="{height:height,transform:translateX}"> <div v-for="item in itemList" :style="{left:item.x+'px'}"> <img :style="{width:width,top:top}" :src="item.url"> </div> </div> <div @click="clickLeft"> <img src="https://www.jb51.net/article/image/arrow.png"> </div> <div @click="clickRight"> <img src="https://www.jb51.net/article/image/arrow.png"> </div> <div > <img src="https://www.jb51.net/article/image/arrow.png"> </div> <div> <div v-for="(item,index) in imgArray" @click="clickSliderCircle(index)" :class="{circleSelected:item.selected}"> </div> </div> </div> </template> <script> const SCREEN_WIDTH=document.body.clientWidth const SCREEN_HEIGHT=document.body.scrollHeight var left,center,right var selectIndex=0 var count=0 var second=3//slider 时间间隔 var timer=null var ani=null var debugScale=1.0//测试用可调整为小于1 var Direction={left:'left',right:'right'}; var autoDirection=Direction.right var canClick=true export default({ data:function(){ return{ width:'100%', height:SCREEN_HEIGHT+'px', top:0, ani:true, translateX:'scale('+debugScale+') translateX(0px)', imgArray:[ { x:0, title1:'现在，在您的实验室', tilte2:'也可以轻松完成无创DNA产前检测', title3:'了解详细流程', click_url:'http://www.berrygenomics.com/products/nextseq-cn500/cn500test/', url:'static/image/1.jpg', selected:false, }, { x:0, title1:'Sequel开启新基因组时代', tilte2:'覆盖十余种胎儿染色体疾病，体验升级，呵护加倍', title3:'了解更多', click_url:'http://www.berrygenomics.com/products/nextseq-cn500/cn500test/', url:'static/image/2.jpg', }, { x:0, title1:'BRCA1/2全外显子基因突变检测', tilte2:'也可以轻松完成无创DNA产前检测', title3:'了解详细流程', click_url:'http://www.berrygenomics.com/products/nextseq-cn500/cn500test/', url:'static/image/3.jpg', }, { x:0, title1:'现在，在您的实验室', tilte2:'也可以轻松完成无创DNA产前检测', title3:'了解详细流程', click_url:'http://www.berrygenomics.com/products/nextseq-cn500/cn500test/', url:'static/image/4.jpg', }, { x:0, title1:'现在，在您的实验室', tilte2:'也可以轻松完成无创DNA产前检测', title3:'了解详细流程', click_url:'http://www.berrygenomics.com/products/nextseq-cn500/cn500test/', url:'static/image/5.jpg', }, { x:0, title1:'现在，在您的实验室', tilte2:'也可以轻松完成无创DNA产前检测', title3:'了解详细流程', click_url:'http://www.berrygenomics.com/products/nextseq-cn500/cn500test/', url:'static/image/6.jpg', }, { x:0, title1:'现在，在您的实验室', tilte2:'也可以轻松完成无创DNA产前检测', title3:'了解详细流程', click_url:'http://www.berrygenomics.com/products/nextseq-cn500/cn500test/', url:'static/image/7.jpg', }, { x:0, title1:'现在，在您的实验室', tilte2:'也可以轻松完成无创DNA产前检测', title3:'了解详细流程', click_url:'http://www.berrygenomics.com/products/nextseq-cn500/cn500test/', url:'static/image/8.jpg', } ], itemList:[] } }, mounted:function(){ ani=this.$refs.root.querySelector('.sliderPanel') count=this.imgArray.length this.setIndex(selectIndex) //自动滚动切换图片 this.slideAuto(second) }, methods:{ clickLeft:function(){ if(!canClick) return false autoDirection=Direction.left this.slideAuto(second) this.moveLeftAni() canClick=false }, clickRight:function(){ if(!canClick) return false autoDirection=Direction.right this.slideAuto(second) this.moveRightAni() canClick=false }, slideRight:function () { selectIndex++ if(selectIndex+1>count){ selectIndex=0 }else if(selectIndex<0){ selectIndex=count-1 } this.setIndex(selectIndex) }, slideLeft:function () { selectIndex-- if(selectIndex+1>count){ selectIndex=0 }else if(selectIndex<0){ selectIndex=count-1 } this.setIndex(selectIndex) }, clickSliderCircle:function (index) { this.slideAuto(second) this.setIndexPre(index) }, setIndexPre:function (index) { if(!canClick) return false canClick=false if(index==selectIndex)return var leftIndex=index var centerIndex=selectIndex var rightIndex=index for(var i=0;i<count;i++){ if(i==selectIndex){ this.imgArray[i].selected=true }else{ this.imgArray[i].selected=false } } left=this.imgArray[leftIndex] center=this.imgArray[centerIndex] right=this.imgArray[rightIndex] left=JSON.parse(JSON.stringify(left)) right=JSON.parse(JSON.stringify(right)) left.x=-SCREEN_WIDTH center.x=0 right.x=SCREEN_WIDTH left.index=leftIndex center.index=centerIndex right.index=rightIndex this.itemList=[left,center,right] if(index>selectIndex){ autoDirection=Direction.right; +function(obj){ obj.anicompted( 'scale('+debugScale+') translateX('+0+'px)', 'scale('+debugScale+') translateX('+-SCREEN_WIDTH+'px)', function(){ obj.setIndex(index) }) }(this) //右移 }else if(index<selectIndex){ //左移 autoDirection=Direction.left; +function(obj){ obj.anicompted( 'scale('+debugScale+') translateX('+0+'px)', 'scale('+debugScale+') translateX('+SCREEN_WIDTH+'px)', function(){ obj.setIndex(index) }) }(this) } }, setIndex:function (index) { var leftIndex=index-1 var centerIndex=index var rightIndex=index+1 if(index<=0){ index=0 leftIndex=count-1 centerIndex=index rightIndex=index+1 }else if(index>=count-1){ index=count-1 leftIndex=index-1 centerIndex=index rightIndex=0 } selectIndex=index for(var i=0;i<count;i++){ if(i==selectIndex){ this.imgArray[i].selected=true }else{ this.imgArray[i].selected=false } } left=this.imgArray[leftIndex] center=this.imgArray[centerIndex] right=this.imgArray[rightIndex] left.x=-SCREEN_WIDTH center.x=0 right.x=SCREEN_WIDTH left.index=leftIndex center.index=centerIndex right.index=rightIndex this.itemList=[left,center,right] }, slideAuto:function () { clearInterval(timer); +function (obj) { timer=setInterval(function () { if(autoDirection==Direction.left){ obj.moveLeftAni() }else{ obj.moveRightAni() } },second*1000) }(this) }, moveLeftAni:function(){ +function(obj){ obj.anicompted( 'scale('+debugScale+') translateX('+0+'px)', 'scale('+debugScale+') translateX('+SCREEN_WIDTH+'px)', function(){ obj.slideLeft() }) }(this) }, moveRightAni:function(){ +function(obj){ obj.anicompted( 'scale('+debugScale+') translateX('+0+'px)', 'scale('+debugScale+') translateX('+-SCREEN_WIDTH+'px)', function(){ obj.slideRight() }) }(this) }, anicompted:function(fromStr,toStr,callBack){ var handler=null,obj=this handler=function(){ ani.removeEventListener('webkitTransitionEnd',handler,false) callBack() obj.ani=false obj.translateX=fromStr canClick=true } ani.removeEventListener('webkitTransitionEnd',handler,false) ani.addEventListener('webkitTransitionEnd',handler,false) this.ani=true this.translateX=toStr } } }) </script> <style scoped> .transitionAni{ transition: all 0.8s cubic-bezier(.23,1,.32,1); /*transition: transform 1s;*/ } .arrowLeft{ transition: all 0.4s ease; width: 60px; height: 60px; position: absolute; left: 15px; top: 50%; margin-top: -30px; background: rgba(0,0,0,0.6); border-radius: 6px; } .arrowLeft:hover{ background: rgba(0,0,0,0.8); transform: scale(1.1); } .arrowRight{ transition: all 0.4s ease; width: 60px; height: 60px; position: absolute; right: 15px; top: 50%; margin-top: -30px; background: rgba(0,0,0,0.6); border-radius: 6px; } .arrowRight:hover{ background: rgba(0,0,0,0.8); transform: scale(1.1); } .sliderBar{ width:100%;height: auto;position: absolute;bottom: 50px; } .circle{ width: 15px; height: 15px; background: rgba(0,0,0,0.7); border-radius: 50%; display: table-cell; margin-right: 3px; transition: all 0.5s ease; } .circle:hover{ background: #C7015C; transform: scale(1.15); } .circleSelected{ background: #C7015C; transform: scale(1.15); } .arrowBottom{ width: 80px; height: 50px; position: absolute; bottom: -15px; left: 50%; margin-left: -40px; background: #C7015C; border-top-left-radius: 10px; border-top-right-radius: 10px; transition: all 0.5s ease-out; } .arrowBottom:hover{ transform: translateY(-10px); background: deeppink; } .picbox{ width: 100%; height: 100%; position: absolute; top: 0; overflow: hidden; /*transform: scale(0.9);*/ /*opacity: 0.2;*/ transition: all 0.45s ease; } /*@keyframes arrowOut-animation {*/ /*from{*/ /*transform: translateY(0px);*/ /*}*/ /*to{*/ /*transform: translateY(15px);*/ /*!*width:200px;*!*/ /*}*/ /*}*/ /*@keyframes arrowIn-animation {*/ /*from{*/ /*transform: translateY(15px);*/ /*}*/ /*to{*/ /*transform: translateY(0px);*/ /*!*height: 200px;*!*/ /*}*/ /*}*/ /*.arrowOut{*/ /*animation: arrowOut-animation;*/ /*animation-duration: 0.5s;*/ /*animation-timing-function: ease-out;*/ /*animation-fill-mode:forwards;*/ /*}*/ /*.arrowIn{*/ /*animation: arrowIn-animation;*/ /*animation-duration: 0.5s;*/ /*animation-timing-function:ease-out;*/ /*animation-fill-mode:forwards;*/ /*}*/ </style>