原生js实现轮播图(自轮播,两翼轮播,点选)

​ 本篇博文实现的是一个原生js写的轮播图,含括了大部分轮播图的功能,有的同学问前端框架那么多干嘛要用原生写,伤神费脑.

​ 个人感觉程序世界里的框架,是让大牛更牛,小白也永远只是小白.框架是死的,需求是不断更新的,我们只有知道了原理,才能不断利用原理满足别人的需求,总会有那么个时候框架满足不了的.所以,不要依赖框架,为了不让自己一直做小白,最近一直在用原生js写bootstrap的一些效果.(刚入坑不久,大佬轻喷)

​ 由于轮播图在网站中的应用比比皆是,在此分享和总结之前原生js实现的轮播图.

注:文中代码只是片段,具体可在CSDN下载或者去我的GitHub仓库下载,记得给star哦,3q~

---

​ 首先我们需要了解轮播图一些基本原理,和轮播图的一些功能:

轮播图原理:

并排的一组照片,放在父盒子的框里,父盒子overflow设置隐藏;

- 轮播图必须注意的一个问题:

​ 第一张跳最后一张或者相反的时候,怎么解决中间的空窗期(不处理会很难看)?

轮播图功能:

自轮播:用于展示,固定时间间隔自动跳下一张;

两翼轮播:用于用户点击两侧的箭头,跳向前后一张;

点选:通常位于下方用于标识当前所在张,也有点击跳向对应张的功能

无外乎,大多数轮播图也就这些功能,先看一下效果图:

接下来我们就一一实现这些功能

1 ) HTML视图:

注意container里的img,需要在首尾各多加一张,为了首位跳转的时候没有空窗:

原理:以末尾跳向第一张为例,

当我们在最后一张时候点击下一张,视图显示最后一张的我们额外加的一张,也就是第一张的替代,此时显示的是第一张图片,确实不是真正位置的第一张,同时,在跳向这假第一张的时候将开始位置重置.

大家可以结合后面js代码理解.

<div id="container">
    <!-- 图片 -->
        <div id="list" style="left: -800px;">
            <img src="img/5.jpg" alt="1" />
            <img src="img/1.jpg" alt="1" />
            <img src="img/2.jpg" alt="2" />
            <img src="img/3.jpg" alt="3" />
            <img src="img/4.jpg"