基于vue2.0實現(xiàn)簡單輪播圖
因為之前一直在忙公司的項目，vue這塊就生疏了不少，正好借這個小demo復習下vue的知識。
先來個效果圖：
如圖所示，實現(xiàn)的就是一個間隔2.5s自動向左切換下一張的輪播圖，同時鼠標移入停止輪播，移出回復輪播；
而下方按鈕會根據(jù)當前圖片自動變紅且可以手動控制當前圖片。
思路：
整個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也就是過渡效果的時候會出現(xiàn)bug，官方給出的建議也是盡可能
在列表渲染的時候加上key值，百利無一害，養(yǎng)成習慣就好。
第二步：
在上一步我們渲染的是一個img數(shù)組，具體：
data () {
return {
imgArray: [
'../static/timg1.jpg',
'../static/timg2.jpg',
'../static/timg3.jpg',
'../static/timg4.jpg'
]
}
}
然后實現(xiàn)輪播的原理就是創(chuàng)建一個變量與當前遍歷的index值比對，若相同則顯示，否則隱藏；
同時下方按鈕index若也與變量相同則當前按鈕變?yōu)榛钴S狀態(tài)即背景變紅。
<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>
第三步：
創(chuàng)建定時器，每隔2.5s給變量mark+1，掛載到鉤子函數(shù)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文件，出現(xiàn)基本的效果。
<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>
第五步：
現(xiàn)在我們得到的效果還是每隔一段時間圖片突然變成另外一張，用戶體驗很差，達不到輪播的效果。
所以我們得加上過渡效果。
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部分需要關(guān)聯(lián)name屬性值作為前綴。
第六步：
給下方按鈕增加切換圖片的點擊事件。
最后我們再加上移入/移出實現(xiàn)關(guān)閉/打開定時器效果，即用戶鼠標停留當前圖片停止?jié)L動，移出則繼續(xù)。
<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>
這個地方卡了我很長時間，因為根據(jù)原生js定時器的思路在定義定時器的時候就應該設置變量，然后把這個變量傳到clearInterval函數(shù)里。
問題在于vue函數(shù)里設置變量很不可取，存在定義域的問題，開啟定時器跟關(guān)閉定時器是兩個函數(shù)，不能共用一個變量。
后來靈機一動，想到不如把變量寫在data里面？
一試，成功！
至此，輪播圖的功能基本實現(xiàn)。
當然，項目做的比較簡陋也存在一些bug，如當一個切換動畫未完成前點擊另一個按鈕會出現(xiàn)神奇的交錯現(xiàn)象，由于時間關(guān)系還未解決，
希望各位看官能提出寶貴的建議！
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue-DPlayer是一個易于使用、高性能的基于Vue.js的視頻播放器組件,這篇文章將為大家詳細介紹一下vue-dplayer視頻播放器組件的安裝與使用,需要的小伙伴可以參考下2023-09-09
這篇文章主要介紹了vue項目安裝使用vconsole方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-11-11
vue.js 實現(xiàn)點擊按鈕動態(tài)添加li的方法
今天小編就為大家分享一篇vue.js 實現(xiàn)點擊按鈕動態(tài)添加li的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
?最近需要再頁面里做個倒計時,發(fā)現(xiàn)用clearInterval()清除定時器失效,下面這篇文章主要給大家介紹了關(guān)于VUE設置和清除定時器的方式及遇到的問題的相關(guān)資料,需要的朋友可以參考下2022-10-10
在Vue中監(jiān)聽滾動事件可以通過使用指令或者自定義事件來實現(xiàn),這篇文章主要給大家介紹了關(guān)于前端vue滾動條滾動監(jiān)聽問題成功解決的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-09-09
這篇文章主要為大家介紹了Vue組件高級通訊之$attrs與$listeners使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
vue如何實現(xiàn)多組關(guān)鍵詞對應高亮顯示
這篇文章主要介紹了vue如何實現(xiàn)多組關(guān)鍵詞對應高亮顯示問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vue3中的模板語法和vue指令,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
當用戶在當前站點停留時間比較長，中途站點進行升級更新之后，用戶如果不刷新頁面就任然停留在舊的頁面里，如何讓用戶收到一個提示，引導用戶進行更新操作呢？下面給大家介紹如何站點更新如何在生產(chǎn)環(huán)境提示用戶更新，進行頁面刷新操作，核心原理其實很簡單2023-03-03
maptalks+three.js+vue webpack實現(xiàn)二維地圖上貼三維模型操作
這篇文章主要介紹了maptalks+three.js+vue webpack實現(xiàn)二維地圖上貼三維模型操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08