Carousel

网页链接

Slider Page

源码

Source Code

如何实现点击切换的

如何显示

网页里有 5 个可以切换的图片, 它们都是作为各自的div.slide的background存在, 初始化时它们被设置opacity:0, 都不会显示出来, 只有带有.current的div才能显示出来.这里, 我们默认为第一个 slide 添加current类

如何切换

添加两个按钮, 分别为next, prev.各自绑定点击事件.就next绑定事件为例,

1. 将当前带有current类的div找到并从它的classList中删除current类
2. 从删除current类的div往下一个兄弟元素寻找(使用nextElementSibling), 如果有, 则给它的classList添加current类.如果没有, 则给第一个 slide 添加current类.

prev同理, 不过是把nextElementSibling改为prevElementSibling

自动切换

使用setInterval(nextSlide, intervalTime)可以实现自动切换.但是要注意的是, 当点击next按钮时, 必须要清除setInterVal, 否则会出现连续切换图片的 bug, 所以每次setInterval()前, clearInterval(intervalId)必须调用, 将每次切换后的时间归零.