VUE开发一个图片轮播的组件
Posted 流火行者
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VUE开发一个图片轮播的组件相关的知识，希望对你有一定的参考价值。
完成效果图如下：
vue开发的思路主要是数据绑定，代码如下：
<template> <div ref="root" style="user-select: none;-webkit-user-select: none;overflow: hidden"> <div class="sliderPanel" :class="{transitionAni:ani}" :style="{height:height,transform:translateX}"> <div v-for="item in itemList" class="verticalCenter picbox" :style="{left:item.x+\'px\'}"> <img :style="{width:width,top:top}" :src="item.url" style="min-height: 100%"> </div> </div> <div @click="clickLeft" class="arrowLeft verticalCenter horizaCenter"> <img src="./image/arrow.png" style="transform: rotate(180deg)"> </div> <div @click="clickRight" class="arrowRight verticalCenter horizaCenter"> <img src="./image/arrow.png"> </div> <div class="arrowBottom verticalCenter horizaCenter" > <img src="./image/arrow.png" style="transform: rotate(90deg) scale(0.7)"> </div> <div class="sliderBar horizaCenter"> <div v-for="(item,index) in imgArray" @click="clickSliderCircle(index)" class="circle" :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=Vue组件开发--轮播图的实现