vue練習demo 實現簡單的輪播圖,方法簡單快捷,使用到transition-group標籤增加使用者體驗 以及vue中的class與style繫結
阿新 • • 發佈:2018-12-06
結構程式碼:
<div class="slider"> <div class="slidershow"> <!-- <transition-group tag="ul"> --> <transition-group tag="ul" class="ul" name="list"> <li class="li1" v-for="(item,index) in imgData"v-show="index===selectedIndex" :key="index"> <a href="#"> <img :src="item" alt=""> </a> </li> </transition-group > <div class="span_box"><span v-for="(item,index) in imgData" @click="change(index)" :class="index==selectedIndex?'active':''" :key="index"></span> </div> </div> </div>
js程式碼:
export default { data(){ return{ selectedIndex: 0, imgData: [ 'static/img/banner-1.jpg', 'static/img/banner-2.jpg', 'static/img/banner-3.jpg', 'static/img/banner-4.jpg', ] } }, methods: { change(i) { // console.log(i) this.selectedIndex = i }, aotuPlay(){ this.selectedIndex++ if(this.selectedIndex>3){ this.selectedIndex=0 } }, go(){ var interval = setInterval(() => { this.aotuPlay() }, 4000); } }, created(){ this.go() } }
css樣式程式碼:
.slider { width: 1000px; height: 400px; overflow: hidden; margin: 50px auto; position: relative; border: 1px solid #000; .slidershow { width: 100%; height: 100%; .ul { li { position: absolute; img { width: 1000px; height: 400px; } } } .span_box { position: absolute; display: flex; align-items: center; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 10; span { width: 20px; height: 5px; border: 1px solid pink; background-color: pink; margin-right: 10px; } .active { background-color: red; } } .list-enter-to { //實現圖片輪播的過渡效果 transition: all 1s ease; transform: translateX(0); } .list-leave-active { transition: all 1s ease; transform: translateX(-100%) } .list-enter { transform: translateX(100%) } .list-leave { transform: translateX(0) } } }
.list-enter-to { //實現圖片輪播的過渡效果 transition: all 1s ease; transform: translateX(0); } .list-leave-active { transition: all 1s ease; transform: translateX(-100%) } .list-enter { transform: translateX(100%) } .list-leave { transform: translateX(0) }
這部分樣式主要是實現過渡的效果 如有不瞭解可以看文件class與style繫結(https://cn.vuejs.org/v2/guide/class-and-style.html)
比較簡單的輪播圖 效果圖如下