本篇博文实现的是一个原生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"