<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:'現(xiàn)在，在您的實驗室',      tilte2:'也可以輕松完成無創(chuàng)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:'也可以輕松完成無創(chuàng)DNA產前檢測',      title3:'了解詳細流程',      click_url:'http://www.berrygenomics.com/products/nextseq-cn500/cn500test/',      url:'static/image/3.jpg',     },     {      x:0,      title1:'現(xiàn)在，在您的實驗室',      tilte2:'也可以輕松完成無創(chuàng)DNA產前檢測',      title3:'了解詳細流程',      click_url:'http://www.berrygenomics.com/products/nextseq-cn500/cn500test/',      url:'static/image/4.jpg',     },     {      x:0,      title1:'現(xiàn)在，在您的實驗室',      tilte2:'也可以輕松完成無創(chuàng)DNA產前檢測',      title3:'了解詳細流程',      click_url:'http://www.berrygenomics.com/products/nextseq-cn500/cn500test/',      url:'static/image/5.jpg',     },     {      x:0,      title1:'現(xiàn)在，在您的實驗室',      tilte2:'也可以輕松完成無創(chuàng)DNA產前檢測',      title3:'了解詳細流程',      click_url:'http://www.berrygenomics.com/products/nextseq-cn500/cn500test/',      url:'static/image/6.jpg',     },     {      x:0,      title1:'現(xiàn)在，在您的實驗室',      tilte2:'也可以輕松完成無創(chuàng)DNA產前檢測',      title3:'了解詳細流程',      click_url:'http://www.berrygenomics.com/products/nextseq-cn500/cn500test/',      url:'static/image/7.jpg',     },     {      x:0,      title1:'現(xiàn)在，在您的實驗室',      tilte2:'也可以輕松完成無創(chuàng)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>