最近在刷網易雲音樂歌單時發現首頁的輪播圖很有意思，正好自己想嘗試做一個PC版的網易雲音樂，於是就是使用Vue去做這個demo，廢話少說，我要出招了，接招吧
頁面的DOM結構
<template>
<div class="slider-container" ref='slider'
:style="sliderStyle"
@mouseover="pause()"
@mouseout="play()">
<div class="slider-content" :class="mask ? 'mask' : ''">
<div class="slider" v-for="(item, index) in list"
:key="index"
:class="setClass(index)"
@click="onClick(index)" :style="setBGImg(item.src)">
</div>
<i v-show="arrow" class="iconfont icon-left" @click="prev()"></i>
<i v-show="arrow" class="iconfont icon-right" @click="next()"></i>
</div>
<div class="dots" v-if="dots">
<span v-for="(item, index) in list" :key="index"
:style="setActiveDot(index)"
@mouseover="currentIndex = index"></span>
</div>
</div>
</template>
複製程式碼Slider-container的樣式(Stylus)
.slider-container
width: 100%
height: 100%
text-align: center
padding: 10px 0
position: relative
複製程式碼這個子元件主要分為兩塊。
- 輪播圖，其中它們的業務邏輯是
- 自動切換
- 左右icon切換輪播圖
- 點選前後輪播圖切換輪播圖
- 滑鼠滑動到輪播圖停止輪播，離開後繼續輪播
Slider-content的DOM結構
<div class="slider-content" :class="mask ? 'mask' : ''">
<div class="slider" v-for="(item, index) in list"
:key="index"
:class="setClass(index)"
@click="onClick(index)" :style="setBGImg(item.src)">
</div>
<i v-show="arrow" class="iconfont icon-left" @click="prev()"></i>
<i v-show="arrow" class="iconfont icon-right" @click="next()"></i>
</div>
複製程式碼Slider-content的樣式(Stylus)
.slider-content
position: relative
width: 100%
height: calc(100% - 20px)
left: 0%
top: 0%
margin: 0px
padding: 0px
background-size: inherit
.slider
position: absolute
margin: 0
padding: 0
top: 0
left: 50%
width: 65%
height: 100%
transition: 500ms all ease-in-out
background-color: #fff
background-repeat: no-repeat
background-position: center
background-size: inherit
transform: translate3d(-50%,0,-80px)
z-index: 1
&:before
position: absolute
content: ""
width: 100%
height: 100%
top: 0
left: 0
background-color: rgba(0, 0, 0, 0)
transition-delay: 100ms!important
transition: all 500ms
cursor: pointer
&.active
transform: translate3d(-50%, 0, 0)
z-index: 20
&.prev
transform: translate3d(-75%, 0, -100px)
z-index: 19
&.next
transform: translate3d(-25%, 0, -100px)
z-index: 18
i
width: 17.5%
display: none
position: absolute
top: 40%
font-size: 22px
color: rgba(255, 255, 255, 0.5)
text-shadow: 0 0 24px rgba(0, 0, 0, 0.3)
cursor: pointer
z-index: 21
&:first-child
left: 0
&:last-child
right: 0
&:hover
i
color: rgba(255, 255, 255, 0.8)
display: block
&.mask
.slider
&.prev, &.next
&:before
background-color: rgba(0, 0, 0, 0.50)
複製程式碼- 底部的dot， 其中它們的業務邏輯是
- 當前輪播圖對應位置的dot高亮
- 滑鼠移動到相應的dot上切換對應位置的輪播圖
Dots的DOM結構
<div class="dots" v-if="dots">
<span v-for="(item, index) in list" :key="index"
:style="setActiveDot(index)"
@mouseover="currentIndex = index"></span>
</div>
複製程式碼Dots的樣式(Stylus)
.dots
width: 100%
height: 20px
span
display: inline-block
width: 20px
height: 2px
margin: 1px 3px
cursor: pointer
複製程式碼上面是頁面的DOM結構和表現的實現程式碼，接下來我們要講的是連招的實現，小心啦，我要摸眼W + R3了。 上面我們講到輪播圖的業務邏輯，接下來，我們就講講如何實現的的吧
自動輪播
play () {
this.pause();
if (this.autoPlay) {
this.timer = setInterval(()=>{
this.next();
}, this.interval)
}
}
複製程式碼暫停輪播
pause () {
clearInterval(this.timer);
}
複製程式碼Icon切換輪播圖
next () {
this.currentIndex = ++this.currentIndex % this.list.length;
},
prev () {
this.currentIndex = this.currentIndex === 0 ? this.list.length - 1 : this.currentIndex - 1;
},
複製程式碼前後輪播圖的切換輪播圖
onClick (i) {
if (i === this.currentIndex){
this.$emit('sliderClick', i);
} else {
let currentClickClassName = this.sliderDomList[i].className.split(' ')[1]
console.log(currentClickClassName)
if (currentClickClassName === 'next') {
this.next()
} else {
this.prev()
}
}
}
複製程式碼dots輪播圖的切換輪播圖
這裡比較簡單，只需要設定它的滑鼠事件即可
@mouseover="currentIndex = index"
複製程式碼程式碼傳送門：Vue網易雲音樂輪播圖的實現