原生js实现轮播的小demo
工作的原因,很少去写最原始的JavaScript代码了。今天闲来下来,想想怎么使用最原始的JavaScript来实现网页中最常见的轮播图的功能:自己写了一个demo(还有期待的优化)。
其实轮播的原理,我一直感觉就两种:一是通过移动距离来实现,二是通过透明度的切换来实现。给人一种仿佛在运动和切换的效果。
先给大家看看我的效果图:
功能:进入盒子.box,轮播停止,出来,轮播启动。点击下面的按键,滑到对应的图片。
我实现的原理是这样的:代码结构如下:
.box的这个盒子,起的作用是相框的作用,就是展示图片的功能。
.boxChlid的盒子,起的就是电影胶片的功能,所有的图片装在它的内部,随着它的移动而移动。
.boxBtn的盒子,是对应图片的按钮,点击那个,让其对应的图片出现在相框中。
对于轮播的自动播放:使用的是定时器,设定一定的时间,自动进行切换(也就是.boxChlid的盒子移动距离)
对于鼠标进入.box的这个盒子,使用清除定时器,让图片轮播停止。
离开.box的盒子,我们要获取到当前停止位置的index,并启动我们的运动函数(含有定时器的)
这里最关键的就是获取到index的位置,也算是一种标记吧。然后传入我们的运动函数,启动我们的运动函数。
我们看看我们的运动函数:
到这里我们就完成了我们的轮播,全部都是最原生的JavaScript知识。我们做轮播其实最主要的就是记录停止的位置和对定期器的控制(通过移动距离(图片的宽度)实现的)。
demo文件的下载地址:https://pan.baidu.com/s/1jHNWyME