基于vue2.0實現簡單輪播圖

來源：懂視網責編：小采時間：2020-11-27 22:25:03

基于vue2.0實現簡單輪播圖

基于vue2.0實現簡單輪播圖:因為之前一直在忙公司的項目，vue這塊就生疏了不少，正好借這個小demo復習下vue的知識。先來個效果圖：如圖所示，實現的就是一個間隔2.5s自動向左切換下一張的輪播圖，同時鼠標移入停止輪播，移出回復輪播；而下方按鈕會根據當前圖片自動變紅且可以手動控

推薦度：

點擊下載本文 文檔為doc格式

導讀基于vue2.0實現簡單輪播圖:因為之前一直在忙公司的項目，vue這塊就生疏了不少，正好借這個小demo復習下vue的知識。先來個效果圖：如圖所示，實現的就是一個間隔2.5s自動向左切換下一張的輪播圖，同時鼠標移入停止輪播，移出回復輪播；而下方按鈕會根據當前圖片自動變紅且可以手動控

因為之前一直在忙公司的項目，vue這塊就生疏了不少，正好借這個小demo復習下vue的知識。

先來個效果圖：

如圖所示，實現的就是一個間隔2.5s自動向左切換下一張的輪播圖，同時鼠標移入停止輪播，移出回復輪播；
而下方按鈕會根據當前圖片自動變紅且可以手動控制當前圖片。

思路：

整個demo分為輪播圖片和控制span兩個部分。
按照前端工程化的需求來說，這兩個部分應該解耦成兩個component最后再導入頁面比較合理，但由于demo較為簡單，
作為練手就不搞那么復雜了，對項目有追求【強迫癥】的童鞋可以往組件化的目標靠，具體方法參考我之前的博文。

第一步，先寫出整體框架：

<template> 
 <div class="slide"> 
 <div class="slideshow"> 
 <ul> 
 <li v-for="(img, index) in imgArray" :key="index"> 
 <a href="#"> 
 <img :src='img'> 
 </a> 
 </li> 
 </ul> 
 </div> 
 <div class="bar"> 
 <span v-for="(item, index) in imgArray" :key="index"></span> 
 </div> 
 </div> 
</template>

我們使用v-for列表渲染兩個部分，值得注意的是列表渲染最好要提供一個key值，至于為什么官方文檔說得很復雜，
就我所知的是如果不加key值在使用transition-group也就是過渡效果的時候會出現bug，官方給出的建議也是盡可能
在列表渲染的時候加上key值，百利無一害，養成習慣就好。

第二步：

在上一步我們渲染的是一個img數組，具體：

data () { 
 return { 
 imgArray: [ 
 '../static/timg1.jpg', 
 '../static/timg2.jpg', 
 '../static/timg3.jpg', 
 '../static/timg4.jpg' 
 ] 
 } 
 }

然后實現輪播的原理就是創建一個變量與當前遍歷的index值比對，若相同則顯示，否則隱藏；
同時下方按鈕index若也與變量相同則當前按鈕變為活躍狀態即背景變紅。

<template> 
 <div class="slide"> 
 <div class="slideshow"> 
 <ul> 
 <li v-for="(img, index) in imgArray" v-show="index===mark" :key="index"> 
 <a href="#"> 
 <img :src='img'> 
 </a> 
 </li> 
 </ul> 
 </div> 
 <div class="bar"> 
 <span v-for="(item, index) in imgArray" :class="{ 'active':index===mark }" :key="index"></span> 
 </div> 
 </div> 
</template>

第三步：

創建定時器，每隔2.5s給變量mark+1，掛載到鉤子函數created：

export default { 
 data () { 
 return { 
 mark: 0, //比對圖片索引的變量 
 imgArray: [ 
 '../static/timg1.jpg', 
 '../static/timg2.jpg', 
 '../static/timg3.jpg', 
 '../static/timg4.jpg' 
 ] 
 } 
 }, 
 methods: { 
 autoPlay () { 
 this.mark++; 
 if (this.mark === 4) { //當遍歷到最后一張圖片置零 
 this.mark = 0 
 } 
 }, 
 play () { 
 setInterval(this.autoPlay, 2500) 
 }, 
 change (i) { 
 this.mark = i 
 } 
 }, 
 created () { 
 this.play() 
 } 
} 
</script>

第四步：

加上css文件，出現基本的效果。

<style> 
 * { 
 margin: 0; 
 padding: 0; 
 list-style: none; 
 } 
 .slide { 
 width: 1024px; 
 height: 320px; 
 margin: 0 auto; 
 margin-top: 50px; 
 overflow: hidden; 
 position: relative; 
 } 
 .slideshow { 
 width: 1024px; 
 height: 320px; 
 } 
 li { 
 position: absolute; 
 } 
 img { 
 width: 1024px; 
 height: 320px; 
 } 
 .bar { 
 position: absolute; 
 width: 100%; 
 bottom: 10px; 
 margin: 0 auto; 
 z-index: 10; 
 text-align: center; 
 } 
 .bar span { 
 width: 20px; 
 height: 5px; 
 border: 1px solid; 
 background: white; 
 display: inline-block; 
 margin-right: 10px; 
 } 
 .active { 
 background: red !important; 
 } 
</style>

第五步：

現在我們得到的效果還是每隔一段時間圖片突然變成另外一張，用戶體驗很差，達不到輪播的效果。
所以我們得加上過渡效果。
html：

<transition-group tag="ul" name="image"> 
 <li v-for="(img, index) in imgArray" v-show="index===mark" :key="index"> 
 <a href="#"> 
 <img :src='img'> 
 </a> 
 </li> 
</transition-group>

css：

.image-enter-active { 
 transform: translateX(0); 
 transition: all 1.5s ease; 
 } 
 .image-leave-active { 
 transform: translateX(-100%); 
 transition: all 1.5s ease; 
 } 
 .image-enter { 
 transform: translateX(100%); 
 } 
 .image-leave { 
 transform: translateX(0); 
 }

這里因為我們是給一個渲染列表加上過渡效果所以要使用transition-group而不是單元素的transition，否則會報錯。
另外就是記得給transition-group加上tag="ul"屬性，不然就會被默認渲染成span了。
css部分需要關聯name屬性值作為前綴。

第六步：

給下方按鈕增加切換圖片的點擊事件。
最后我們再加上移入/移出實現關閉/打開定時器效果，即用戶鼠標停留當前圖片停止滾動，移出則繼續。

<template> 
 <div class="slide" v-on:mouseover="stop()" v-on:mouseout="move()"> 
 <div class="slideshow"> 
 <transition-group tag="ul" name="image"> 
 <li v-for="(img, index) in imgArray" v-show="index===mark" :key="index"> 
 <a href="#"> 
 <img :src='img'> 
 </a> 
 </li> 
 </transition-group> 
 </div> 
 <div class="bullet"> 
 <span v-for="(item, index) in imgArray" :class="{ 'active':index===mark }" 
 @click="change(index)" :key="index"></span> 
 </div> 
 </div> 
</template> 
 
<script> 
export default { 
 data () { 
 return { 
 timer: null, //定時器 
 mark: 0, //比對圖片索引的變量 
 imgArray: [ 
 '../static/timg1.jpg', 
 '../static/timg2.jpg', 
 '../static/timg3.jpg', 
 '../static/timg4.jpg' 
 ] 
 } 
 }, 
 methods: { 
 autoPlay () { 
 this.mark++; 
 if (this.mark === 4) { 
 this.mark = 0 
 } 
 }, 
 play () { 
 this.timer = setInterval(this.autoPlay, 2500) 
 }, 
 change (i) { 
 this.mark = i 
 }, 
 stop () { 
 clearInterval(this.timer) 
 }, 
 move () { 
 this.timer = setInterval(this.autoPlay, 2500) 
 } 
 }, 
 created () { 
 this.play() 
 } 
} 
</script>

這個地方卡了我很長時間，因為根據原生js定時器的思路在定義定時器的時候就應該設置變量，然后把這個變量傳到clearInterval函數里。
問題在于vue函數里設置變量很不可取，存在定義域的問題，開啟定時器跟關閉定時器是兩個函數，不能共用一個變量。
后來靈機一動，想到不如把變量寫在data里面？
一試，成功！

至此，輪播圖的功能基本實現。
當然，項目做的比較簡陋也存在一些bug，如當一個切換動畫未完成前點擊另一個按鈕會出現神奇的交錯現象，由于時間關系還未解決，
希望各位看官能提出寶貴的建議！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

基于vue2.0實現簡單輪播圖

推薦度：

點擊下載本文 文檔為doc格式

標簽： VUE 輪播簡單

熱門焦點

基于vue2.0實現簡單輪播圖

基于vue2.0實現簡單輪播圖

基于vue2.0實現簡單輪播圖

最新推薦

猜你喜歡

熱門推薦