vue項目的無縫輪播

前言

為了練習vue做的一個小例子，主要是用vue來實作焦點圖的無縫輪播

Demo

思路

要想做到無縫輪播，最重要有兩點。

1.

就是在最後一張和第一張都得各增加一張圖，分别是第一張和最後一張。如下：總共是圖檔1234，就在4後面增加1，在1前面增加4

2.  過渡動畫：在4過渡到“1”（這裡的1是4後面增加的1）時，這時要把過渡效果去掉，同時快速切換到1（這裡的1是1234的1）去。給個定時器settimeout,定時器的時間等于過渡時間。

當到了最後一張圖4，再點下一張時，這時過渡到341的1去，給個定時器，定時器的時間等于過渡時間。當它剛過渡完成後，立即切換到1234的1去，肉眼看不出來的。

html結構：

<template>    
    <div class="slide-wrap"  @mouseover="pasue" @mouseout="play">        
        <ul class="slide-bar" :style="ulWidth" :class="{'tran': noLast}">            
            <li v-for="item in list" :style="{'width':liWidth + '%'}">
                <img :src="item"> 
            </li>        
        </ul>        
        <div class="arrow">            
            <img :src="arrow_left" class="arrow_left" @click="prev">            
            <img :src="arrow_right" class="arrow_right" @click="next">        
        </div>        
        <div class="pagnator">            
            <span v-for="(page, index) in list" :class="{'active': index == current + 1,'extra': index == 0 || index == list.length -1}"></span>        
        </div>    
    </div>   
</template>
複制代碼
           

script:

export default {    
    name: 'SlideChild',    
    data() {        
        return {            
          list: [ //數組前後各增加一張圖檔                
                'static/image/6.jpg',                
                'static/image/1.jpg',                
                'static/image/2.jpg',                
                'static/image/3.jpg',                
                'static/image/4.jpg',                
                'static/image/5.jpg',                
                'static/image/6.jpg',                
                'static/image/1.jpg'            
                ],            
          arrow_left: 'static/image/arrow_left.png',            
          arrow_right: 'static/image/arrow_right.png',            
          bar: {                
              width: '0',                
              transform: 'translateX(0)',            
          },            
          current: 0,            
          noLast: true        
        }    
     },    
     computed: {            
        ulWidth(){                                
            this.bar = {                    
                transform: 'translateX(-'+ ((this.current+1) * 100) +'%)',                
             }                
             return this.bar;            
        },            
        liWidth(){                
            return 100;            
         }           
     },    
     methods: {        
        prev(){            
            this.current --;            
            if(this.current == -1) {                 
                setTimeout(() => {                    
                    //取消過渡效果,使用css來進行操作transition,如果直接用js來操作transition,達不到我們要的效果                    
                    this.noLast = false;                     
                    //切換到1234的4去，由于ul的translatex索引是this.current+1,是以1234的4為this.list.length - 3 +1 = this.list.length -2                    
                    //具體多少，得看你的布局是怎樣的，有沒有合并在數組裡面去                      
                    this.current = this.list.length - 3;                  
                }, 500); //定時器的時間等于過渡時間            
             }            
            this.noLast = true;         
         },        
         next(){            
            this.current ++;                       
            if (this.current == this.list.length-2) {                 
                setTimeout(() => {                    
                    this.noLast = false;                    
                    this.current = 0;                
                 }, 500);            
            }            
            this.noLast = true;        
         },        
         pasue(){            
            console.log('暫停');            
            clearInterval(this.timer)        
         },        
         play(){            
            console.log('播放');            
            this.autoSwitch();        
          },        
          autoSwitch(){ //自動播放            
            this.timer = setInterval(() =>{                
                this.next();            
            },1000)        
          }    
    },    
    created(){      
        this.autoSwitch();    
     }}複制代碼
           

css:

.slide-box {    
    width: 300px;    
    margin: auto;
}
.slide-wrap {    
    overflow: hidden;    
    position: relative;
}
.slide-bar {    
    display: -webkit-box;
}
.tran {    
    transition: all 0.5s;
}
.slide-bar li {    
    height: 200px;
}
.slide-bar img {     
    width: 100%;    
    height: 100%;
}
.arrow img {    
    position: absolute;    
    top: 46%;    
    transform: translateY(-50%);    
    padding: 6px 0;    
    cursor: pointer;
}
.arrow .arrow_left {    
    left: 0;
}
.arrow .arrow_right {    
    right: 0;
}
.pagnator {    
    position: absolute;    
    bottom: 10px;    
    left: 0;    
    right: 0;
}
.pagnator span {    
    display: inline-block;       
    width: 10px;    
    height: 10px;    
    margin: 2px;    
    border-radius: 50%;    
    background: rgba(255, 255, 255, 0.5);    
    cursor: pointer;
}
.active {    
    background: rgba(76, 175, 80, 0.64) !important;
}
.extra {    
    display: none !important;
}複制代碼
           

遇到的坑

1. 過渡效果不要用js操作，使用css添加類名操作 2.判斷的分界線要清楚，看數組是怎樣的，是原數組，還是已經添加圖檔的數組？

參考文章