html 轮播图_原生JS实现轮播图

看视频课太困了~来写篇文章醒醒困.....

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

主要实现的是PC端的轮播（移动端的轮播应该还要实现拖拽功能），主要实现了以下功能：

1. 自动循环轮播
2. 鼠标进入停止轮播，鼠标移出开始自动轮播
3. 点击上一张/下一张
4. 点击轮播图底部的圆点实现图片的切换

源代码贴在文章末尾

思路：

其实之前也有跟着视频教程写过，并且在打算要写轮播图前还在网上看了点资料，大多数人还是通过多添加一张图片的方式来实现轮播。我呢，完全跟着自己的感觉走，没有多添加一张图片，在写轮播的过程中也遇到了各种Bug，好在耐心的去找原因并解决。其中最让我抓狂的就是循环轮播不衔接的问题。

我大体的思路主要是根据要实现的功能来的，比如：

1. 自动轮播封装了一个autoSwiper函数；
2. 鼠标进入/移出封装了handleMouseEvent函数；
3. 点击上一张/下一张封装了handleClickEvent函数；
4. 点击轮播图底部的圆点实现图片的切换封装了handleClickIcon函数

这样封装的好处就是代码看起来更清晰，思路更明确，不会感觉一团糟的感觉。要实现以上功能，这个函数之间联系也十分紧密，比如autoSwiper函数可以正常实现，但是当执行了handleClickIcon函数后，可能会导致autoSwiper报错，因此十分谨慎的处理函数之间的公共变量。与这几个函数联系紧密的主要是swiperWidth(所有图片的宽度)，startPosition(swiper当前的位置)，swiperleft(swiper的left值);

现在具体介绍下具体的实现：

首先是HTML结构，有一点要十分注意，ul必须使用绝对定位(postion：absolute)，后续的操作都是通过doc.style.left来改变其位置的。

<

然后重点介绍下swiper.js（所有的业务逻辑都在这里）：

刚开始要把需要用到的DOM元素获取到：

// 获取元素

接着要进行初始化操作：

// 初始化设置

上面的准备工作做好后就可以开始功能的实现了，先来实现自动轮播的功能。毫无疑问，这里必须要用到setInterval了，我还是先放代码吧：

// 实现自动轮播

我觉得我这里做了一件十分愚蠢的事情，就是把startPosition设置为正值了，导致我后面出现好多Bug，时间原因我就没有再去重构了，总之我建议使用真实的left值。

这个函数其实就做了三件事：

1. 每次轮播前都必须把所有圆点激活样式清空；
2. 自动轮播。自动轮播其实很好理解，难点在循环轮播；
3. 循环轮播。判断是否轮播的依据为postion的值，当postion不符合条件时进行循环轮播，但是直接这样会出现个小Bug，就是轮播到第一张，再到第二张时候，间隔时间变长了，变为2s了，这是因为它执行了两次，因此我设置了一个中间变量isLoop，当isLoop为true时直接让它从第二张开始轮播。

接着是鼠标进入和移出的实现，这个功能主要用的是事件委托，比较简单就不再多说：

// 鼠标进入停止轮播/移出开始轮播

然后是点击上一张/下一张。这里也要注意每次点击的时候要清除圆点的激活样式，还有循环轮播的问题。这里就是！！！特别要注意startPosition 的正负，这个值还会影响函数autoSwiper。

// 点击上一张/下一张

最后就是点击圆点切换图片了，这个也比较简单，不多说：

// 点击icon切换轮播图

总结：

其实，这个轮播图做的比较简单，没有什么动画效果，我觉得js里面制作动画效果可能是自己的一块短板，其次呢，代码不够简洁，比较冗余，再接再厉吧~

最后附上我的源代码，需要的可以去我的GitHub上clone！有什么建议也可以提~

https://github.com/ZhipengYang0605/Swiper-JS​github.com