脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-原生js实现轮播的小demo教程，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

工作的原因，很少去写最原始的JavaScript代码了。今天闲来下来，想想怎么使用最原始的JavaScript来实现网页中最常见的轮播图的功能：自己写了一个demo（还有期待的优化）。

其实轮播的原理，我一直感觉就两种：一是通过移动距离来实现，二是通过透明度的切换来实现。给人一种仿佛在运动和切换的效果。

先给大家看看我的效果图：

功能：进入盒子.box，轮播停止，出来，轮播启动。点击下面的按键，滑到对应的图片。

我实现的原理是这样的：代码结构如下：

.box的这个盒子，起的作用是相框的作用，就是展示图片的功能。

.boxChlid的盒子，起的就是电影胶片的功能，所有的图片装在它的内部，随着它的移动而移动。

.boxBTn的盒子，是对应图片的按钮，点击那个，让其对应的图片出现在相框中。

对于轮播的自动播放：使用的是定时器，设定一定的时间，自动进行切换（也就是.boxChlid的盒子移动距离）

对于鼠标进入.box的这个盒子，使用清除定时器，让图片轮播停止。

离开.box的盒子，我们要获取到当前停止位置的index，并启动我们的运动函数（含有定时器的）

这里最关键的就是获取到index的位置，也算是一种标记吧。然后传入我们的运动函数，启动我们的运动函数。

我们看看我们的运动函数：

到这里我们就完成了我们的轮播，全部都是最原生的JavaScript知识。我们做轮播其实最主要的就是记录停止的位置和对定期器的控制（通过移动距离（图片的宽度）实现的）。

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-原生js实现轮播的小demo教程全部内容，希望文章能够帮你解决javascript代码实例教程-原生js实现轮播的小demo教程所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。