vue过渡效果-轮播图淡入淡出

本效果运用了vue的过渡效果实现

相关代码运用：

v-if：条件渲染，将元素删除再渲染出来。

v-show：条件展示，display=none掉，再展示出来；

v-key：vue区分元素的唯一元素标识，必须设置，否则相同的名字的标签只会瞬间改变内容。

transition-group标签：可以同时渲染整个列表，比如v-for出来的元素。里面可以设置个如：tag=‘p’改变标签形式，在浏览器中显示为p标签。里面的元素必须设置v-key。

开始：

html部分：

<div class="banner">
  // 切换的图片部分
  <div class="bannerImg">
    <transition-group tag="div">
      <span v-for="(v,i) in banners" :key="i" :style="{opacity:(i+1)==n?'1':'0'}" class="active">
        ![]('./src/assets/banner'+v)
      </span>
    </transition-group>
  </div>
  // 切换的小按钮部分
  <ul class="bannerBtn clear-fix">
    <li v-for="num in 3">
      <a href="javascript:;" :style="{background:num==n?'#ff7800':''}" @click='change(num)' class='aBtn'></a>
    </li>
  </ul>
</div>

1. transition-group中放入要循环的图片部分
2. span中
   :key="i" 以下标作为依据
   :style="{opacity:(i+1)==n?'1':'0'}" 当前图片显示，其他图片隐藏
3. 小图标
   :style="{background:num==n?'#ff7800':''}" 当前按钮背景为#ff7800，其他为空

css部分

.banner{
    position: relative;
}
.bannerImg{
    position: relative;
    height: 360px;
    overflow: hidden;    
}
.bannerImg span{
    position: absolute;
    top:0;
    left: 0;
}
.bannerImg span.active{
    transition:all 1s;
}
.bannerBtn{
    width: 200px;
    position:absolute;
    left:50%;
    margin-left:-100px;
    bottom:22px;
    text-align:center;
}
.bannerBtn li{
    margin: 0 13px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    float:left;
    background: rgba(255,255,255,.4);
 }
.bannerBtn li a{
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin: 3px;
} 
.bannerBtn li a.aBtn{
    transition:all .6s ease;
}       

javascript部分：

数据部分

data () {
    return {
         banners:['1.jpg','2.jpg','3.jpg'],
         n:1,　　　　　　　// 图片的index。
         bFlag:true,      // 锁定
         timer1:'',　　　　// 这是bFlag定时器的数据
         timer2:'',　　　　// 这是自动播放（next（））定时器的数据
         timer3:'',　　　　// 这是打开浏览器时，初始运动定时器的数据
    }
},

方法部分

methods:{
    next(){
        // 下一张　　　
        // 为了避免连续点击。让bFlag运动结束后再变为true。　　　　　　　　　　　　　　
        if(this.bFlag){　　　　　　　　　　　　
            this.bFlag=false;
            this.clearT();　　　　　　　　　   // 运动之前，清除所有定时器。
            this.n=this.n+1==4?1:this.n+1;　  // 下一张，如果是第4张，就返回第一张。
            // 调用timeout函数，延迟进入下一次轮播，以便可以点击切换。
            this.timeout();
        }
    },
    clearT(){
        // 清除所有定时器　　　　　　　　　　　　　　　
        clearTimeout(this.timer1);
        clearTimeout(this.timer2);
        clearTimeout(this.timer3);
    },
    timeout(){　　　　　　
        // 运动结束后设置bFlag为true，并且3秒后调用next，进行下一次运动。
        // 运动时间是1s。
        this.timer2=setTimeout(()=>{
            this.bFlag=true
        },1000);
        this.timer1=setTimeout(()=>{
            this.next()
        },3000);
    },
    change(num){　　　　　　　　　　
        // 点击按钮，切换到对应图片，需要获取index。
        if(this.bFlag){
            this.bFlag=false;
            this.clearT();
            this.n=num;　　　　　　　         // 将显示图片变为选中的那一张。　　　　
            this.timeout()
        }
    }
},

加载后开始轮播

mounted(){
    this.timer3=setTimeout(this.next,3000);
}