首页>>焦点图>>vue pc端轮播焦点图(2019-07-10)

vue pc端轮播焦点图

vue pc端轮播焦点图
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="app">  
  2. <div id="carousel" @mouseover="stopAuto" @mouseout="autoPlay">  
  3. <div class="carousel-box" :style="{width:allCount,'-webkit-transition':transitionConfig,'-webkit-transform':slateX}" ref="carousel">  
  4. <div class="carousel-item" :style="{'-webkit-transform':imgLateX}" v-if="loop">  
  5. <img :src="imgList[imgList.length-1].img" />  
  6. </div>  
  7. <div class="carousel-item" v-for="(item,index)  in imgList" :style="{'-webkit-transform':getImgLateX(index)}">  
  8. <img :src="item.img" />  
  9. </div>  
  10. <div class="carousel-item" :style="{'-webkit-transform':endImgLateX}" v-if="loop">  
  11. <img :src="imgList[0].img" />  
  12. </div>  
  13. </div>  
  14. <span class="carousel-left" @click="toLeft">‹</span>  
  15. <span class="carousel-right" @click="toRight">›</span>  
  16. <div class="carousel-dots" v-if="dots">  
  17. <button v-for="(item,index) in imgList.length" :key="index" :class="{active:index==dotsIndex}" @click="toDots(index)">{{item}}</button>  
  18. </div>  
  19. </div>  
  20. </div>  

 

JavaScript Code
  1. <script>  
  2. new Vue({  
  3.     el:'#app',  
  4.     data: {  
  5.         imgList:[  
  6.           {  
  7.              img:'http://www.freejs.net/demo/demo1.jpg'  
  8.           },  
  9.           {  
  10.              img:'http://www.freejs.net/demo/demo2.jpg'  
  11.           },  
  12.           {  
  13.              img:'http://www.freejs.net/demo/demo3.jpg'  
  14.           },  
  15.           {  
  16.              img:'http://www.freejs.net/demo/demo4.jpg'  
  17.           }  
  18.         ],  
  19.         // 图片宽  
  20.         imgWidth:750,  
  21.         // 指示器  
  22.         dots:true,  
  23.         arrow:true,  
  24.         // 初始播放位置  
  25.         initIndex:0,  
  26.         // 是否循环  
  27.         loop:true,  
  28.         // 持续时间  
  29.         duration:0.3,  
  30.         // 自动播放  
  31.         auto:true,  
  32.         // 自动播放时间间隔  
  33.         autoTime:2000,  
  34.         imgIndex:0,  
  35.         durationTime:0.2,  
  36.         dotsIndex:0,  
  37.         autoer:null,  
  38.     },  
  39.     computed:{  
  40.       allCount(){  
  41.         //   console.log(this.imgList.length)  
  42.         //   console.log(this.imgWidth)  
  43.         // console.log((this.imgList.length*this.imgWidth)+'px')  
  44.         return (this.imgList.length*this.imgWidth)+'px';  
  45.       },  
  46.       slateX(){  
  47.          console.log('translate3d('+(-this.imgIndex*this.imgWidth)+'px,0,0)')  
  48.          return 'translate3d('+(-this.imgIndex*this.imgWidth)+'px,0,0)'  
  49.       },  
  50.       transitionConfig(){  
  51.          return 'all '+this.durationTime+'s';  
  52.       },  
  53.       imgLateX(){  
  54.           let width = -this.imgWidth  
  55.           console.log(width)  
  56.           return 'translate3d('+(width)+'px,0,0)'  
  57.       },  
  58.     //   getImgLateX(i){  
  59.     //         console.log(i)  
  60.     //     let width = this.imgWidth*i  
  61.     //     return 'translate3d('+(width)+'px,0,0)'  
  62.     //   },  
  63.       endImgLateX(){  
  64.         let width = this.imgList.length  
  65.         console.log(width)  
  66.         return 'translate3d('+(width)+'px,0,0)'  
  67.       }  
  68.     },  
  69.     created(){  
  70.       this.imgIndex=this.dotsIndex=this.initIndex;  
  71.   
  72.       this.durationTime=this.duration;  
  73.   
  74.       if(this.auto) this.autoPlay();  
  75.     },  
  76.     methods:{  
  77.         getImgLateX(i){  
  78.         console.log(i)  
  79.         let width = this.imgWidth*(i+1)  
  80.         console.log(width)  
  81.         return 'translate3d('+(width)+'px,0,0)'  
  82.       },  
  83.       toLeft(){  
  84.           if(this.loop){  
  85.              this.imgIndex--;  
  86.              this.dotsIndex--;  
  87.              if(this.dotsIndex<=-1) this.dotsIndex=this.imgList.length-1;  
  88.   
  89.              if(this.imgIndex<=-2) this.loopFn('left');  
  90.   
  91.           }  
  92.           else {  
  93.              if(this.imgIndex==0) return this.dotsIndex=this.imgIndex=this.imgList.length-1;  
  94.              this.imgIndex--;  
  95.              this.dotsIndex--;  
  96.   
  97.           }  
  98.   
  99.       },  
  100.       toRight(){  
  101.           if(this.loop){  
  102.             // alert(this.loop)  
  103.   
  104.                 this.imgIndex++;  
  105.                 this.dotsIndex++;  
  106.                 if(this.dotsIndex==this.imgList.length) this.dotsIndex=0;  
  107.                 if(this.imgIndex==this.imgList.length+1) this.loopFn('right');  
  108.           }  
  109.           else {  
  110.              this.imgIndex++;  
  111.              this.dotsIndex++;  
  112.              if(this.imgIndex>this.imgList.length-1) return this.dotsIndex=this.imgIndex=0;  
  113.           }  
  114.       },  
  115.       loopFn(type){  
  116.           const dur=this.durationTime;  
  117.           this.durationTime=0;  
  118.   
  119.           this.imgIndex=type=='right'?0:this.imgList.length-1;  
  120.   
  121.           setTimeout(()=>{  
  122.             this.$nextTick(function(){  
  123.                  this.durationTime=dur;  
  124.   
  125.                  if(type=='right') this.imgIndex++;  
  126.                  else this.imgIndex--;  
  127.             })  
  128.           },30)  
  129.         },  
  130.       toDots(index){  
  131.           this.dotsIndex=this.imgIndex=index;  
  132.       },  
  133.       autoPlay(){  
  134.            if(this.auto){  
  135.                clearInterval(this.autoer);  
  136.                this.autoer=setInterval(()=>{  
  137.                      this.toRight();  
  138.                },this.autoTime)  
  139.            }  
  140.   
  141.       },  
  142.       stopAuto(){  
  143.           if(this.auto) return clearInterval(this.autoer);  
  144.       }  
  145.     },  
  146. });  
  147. </script>  

 


原文地址:http://www.freejs.net/article_jiaodiantu_793.html