vueは輪播図(スクロール切替、シームレス切替、自動切替、ループロールバックなし、スクロール一時停止などの効果)を実現する

vue実現輪播図
好きな友达は私とお互いに関心を持つことができて、どんな疑问があっても私はお互いに勉强して、共に进歩することができます
あまり話さないで,まず効果を見なさい.

スクロール切替、シームレス切替、ループスクロール

マウスは自動スクロールを一時停止し、自動スクロールを継続する

に入る.
主なコード:

HTML構造

	<div class="swiper">
      <div class="moveL" @click="switchImg(-1)"><div>
      <div 
      class="container" 
      @mouseenter="stopAuto"
      @mouseleave="startAuto">
        <ul ref="showImg">
          <li 
          v-for="(item, index) in imgArr" 
          :key="index" 
          :class="{'currentImg': index === selected}">
            <img :src="item.src" alt="">
          li>
          
          <li><img :src="imgArr[0].src" alt="">li>
        ul>
      div>
      <div class="moveR" @click="switchImg(-2)">>div>
      <div class="footer">
        <ol>
          <li 
          v-for="(item, index) in imgArr" 
          :key="index" 
          :class="{'currentCircle': index === selected}"
          @click="switchImg(index)">
          li>
        ol>
      div>
    div>

dataデータ

	data: {
        imgArr: [	//     
          {src: './img/1.jpg'},
          {src: './img/2.jpg'},
          {src: './img/3.jpg'},
          {src: './img/4.jpg'}
        ],
        selected: 0, //        
        imgWidth: 600,  //     
        flag: true //    ，        
      },

主要関数

パッケージ画像スクロールアニメーション関数

//       
        animate(moveX, callback){
          if(this.flag){
            this.flag = false;  //      ，               
            let ulX = this.$refs.showImg.offsetLeft;
            let target = ulX + moveX; //          
            this.swiper = setInterval(()=>{ //          
              let step = (target - this.$refs.showImg.offsetLeft)/10; //            
              step = step>0 ? Math.ceil(step) : Math.floor(step); //           
              let startX = this.$refs.showImg.offsetLeft; //          
              if(this.$refs.showImg.offsetLeft === target){ //     
                clearInterval(this.swiper); //             
                callback && callback();
                return;
              }
              this.$refs.showImg.style.left = startX + step + 'px';  //   
            }, 15);
          }
        },

は、左右のボタンと下部のドットをクリックして画像

を切り替えることを実現する.

//     ，index  -1     ，-2     ，         
        switchImg(index){	
          if(index === -1){ //    
            if(this.selected === 0){  //       
              if(!this.flag) return;  //     bug
              index = this.imgArr.length;
              this.$refs.showImg.style.left = -index * this.imgWidth + 'px';  //        
              this.animate(this.imgWidth, ()=>{
                this.selected = this.imgArr.length-1;    //      
                this.flag = true;
              })
            }else{
              this.animate(this.imgWidth, ()=>{    //      
                this.selected--;
                this.flag = true;
              })
            }
          }else if(index === -2){ //    
            if(this.selected === this.imgArr.length-1){ //         
              index = this.imgArr.length;
              this.animate(-this.imgWidth, ()=>{  //      
                this.selected = 0;
                this.$refs.showImg.style.left = 0;  
                this.flag = true;
              })
            }else {
              this.animate(-this.imgWidth, ()=>{
                this.selected++; //       
                this.flag = true;
              })
            }
          }else{  //            
            let oldIndex = this.selected;
            this.selected = index;
            let moveX = -(index - oldIndex) * this.imgWidth;
            this.animate(moveX, ()=>{this.flag = true;});
         }
        },

自動切替、マウス進入一時停止および離脱継続

	    startAuto(){  //     ，      
          this.autoSwitch = setInterval(()=>{ //     
            this.switchImg(-2);
          },2000)
        },
        stopAuto(){ //     ，      
          clearInterval(this.autoSwitch);
        },
      mounted(){	//     
        this.autoSwitch = setInterval(()=>{ //     
          this.switchImg(-2);
        },2000)
      }