本效果運(yùn)用了vue的過(guò)渡效果實(shí)現(xiàn)

相關(guān)代碼運(yùn)用：

v-if：條件渲染，將元素刪除再渲染出來(lái)。

v-show：條件展示，display=none掉，再展示出來(lái)；

v-key：vue區(qū)分元素的唯一元素標(biāo)識(shí)，必須設(shè)置，否則相同的名字的標(biāo)簽只會(huì)瞬間改變內(nèi)容。

transition-group標(biāo)簽：可以同時(shí)渲染整個(gè)列表，比如v-for出來(lái)的元素。里面可以設(shè)置個(gè)如：tag=‘p’改變標(biāo)簽形式，在瀏覽器中顯示為p標(biāo)簽。里面的元素必須設(shè)置v-key。

開(kāi)始：

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">
        <img :src="'./src/assets/banner'+v+'.jpg" />
      </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中放入要循環(huán)的圖片部分
2. span中
   :key="i" 以下標(biāo)作為依據(jù)
   :style="{opacity:(i+1)==n?'1':'0'}" 當(dāng)前圖片顯示，其他圖片隱藏
3. 小圖標(biāo)
   :style="{background:num==n?'#ff7800':''}" 當(dāng)前按鈕背景為#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部分：

數(shù)據(jù)部分

data () {
    return {
         banners:['1.jpg','2.jpg','3.jpg'],
         n:1,　　　　　　　// 圖片的index。
         bFlag:true,      // 鎖定
         timer1:'',　　　　// 這是bFlag定時(shí)器的數(shù)據(jù)
         timer2:'',　　　　// 這是自動(dòng)播放（next（））定時(shí)器的數(shù)據(jù)
         timer3:'',　　　　// 這是打開(kāi)瀏覽器時(shí)，初始運(yùn)動(dòng)定時(shí)器的數(shù)據(jù)
    }
},

方法部分

methods:{
    next(){
        // 下一張　　　
        // 為了避免連續(xù)點(diǎn)擊。讓bFlag運(yùn)動(dòng)結(jié)束后再變?yōu)閠rue?！　　　　　　　　　　　　　?        if(this.bFlag){　　　　　　　　　　　　
            this.bFlag=false;
            this.clearT();　　　　　　　　　   // 運(yùn)動(dòng)之前，清除所有定時(shí)器。
            this.n=this.n+1==4?1:this.n+1;　  // 下一張，如果是第4張，就返回第一張。
            // 調(diào)用timeout函數(shù)，延遲進(jìn)入下一次輪播，以便可以點(diǎn)擊切換。
            this.timeout();
        }
    },
    clearT(){
        // 清除所有定時(shí)器　　　　　　　　　　　　　　　
        clearTimeout(this.timer1);
        clearTimeout(this.timer2);
        clearTimeout(this.timer3);
    },
    timeout(){　　　　　　
        // 運(yùn)動(dòng)結(jié)束后設(shè)置bFlag為true，并且3秒后調(diào)用next，進(jìn)行下一次運(yùn)動(dòng)。
        // 運(yùn)動(dòng)時(shí)間是1s。
        this.timer2=setTimeout(()=>{
            this.bFlag=true
        },1000);
        this.timer1=setTimeout(()=>{
            this.next()
        },3000);
    },
    change(num){　　　　　　　　　　
        // 點(diǎn)擊按鈕，切換到對(duì)應(yīng)圖片，需要獲取index。
        if(this.bFlag){
            this.bFlag=false;
            this.clearT();
            this.n=num;　　　　　　　         // 將顯示圖片變?yōu)檫x中的那一張。　　　　
            this.timeout()
        }
    }
},

加載后開(kāi)始輪播

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