html网易云音乐图片轮播效果,Vue之网易云音乐PC版轮播图的实现

Github - program-learning-lists

最近在刷网易云音乐歌单时发现首页的轮播图很有意思，正好自己想尝试做一个PC版的网易云音乐，于是就是使用Vue去做这个demo，废话少说，我要出招了，接招吧

页面的DOM结构

:style="sliderStyle"

@mouseover="pause()"

@mouseout="play()">

:key="index"

:class="setClass(index)"

@click="onClick(index)" :style="setBGImg(item.src)">

:style="setActiveDot(index)"

@mouseover="currentIndex = index">

Slider-container的样式(Stylus)

.slider-container

width: 100%

height: 100%

text-align: center

padding: 10px 0

position: relative

这个子组件主要分为两块。

第一块、轮播图，其中它们的业务逻辑是

自动切换

左右icon切换轮播图

点击前后轮播图切换轮播图

鼠标滑动到轮播图停止轮播，离开后继续轮播

Slider-content的DOM结构

:key="index"

:class="setClass(index)"

@click="onClick(index)" :style="setBGImg(item.src)">

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结构

:style="setActiveDot(index)"

@mouseover="currentIndex = index">

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"