vue项目的无缝轮播-CSDN博客

前言

为了练习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;
}复制代码