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

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

一个用原生JS造的轮播图插件

自己弄这个轮子是来自之前vue做一个音乐播放器项目时，用到了一个第三方vue组件better-scroll，当时参考这个文档做轮播图的时候，发现Slider-item真实渲染出来的多了两个节点，向作者提问了下，回答当传入 snap:{loop:true} 的时候，前后各 clone 一个节点，保证可以无缝循环轮播，那么多克隆这两个节点是怎么实现无无缝轮播图呢，查阅了相关原理，就做了下这个轮子。

在线演示

传送门

原理：

所谓的无缝就是利用了两个辅助节点，eg：
5 1 2 3 4 5 1
其中首尾5,1就是辅助节点，为了实现过渡，当真实的5节点滑动到下一节点1时，其实是滑到了辅助1节点，此时再瞬间将位置指向真正的1节点，因为是相同的节点，此时外界就看不到发生的变化。

利用了float和overflow，外界container设置成一张图片的大小，设置voerflow超出部分为hidden，第一个节点辅助节点5的left为0px，下一个就是真实的节点1为-600px(假设图片宽600px)，后面依次推。通过控制容器的left值来实现轮播。(向右偏移left值越来越小)

功能

无缝轮播 用递归实现自动播放，鼠标hover状态时停止自动播放，且浮现左右控制箭头，移开则消失。 焦点dot的状态随图片轮播亮起和熄灭。且可以点击dot来自由切换跳转到相应的图片。 轮播间隔时间和图片切换时间在代码里直接改相关时间常量即可。

优化

点击当前的dot按钮，不会触发，不会执行内部响应的代码。避免无效的执行，节省内存。 当快速频繁点击左偏移和右偏移箭头的时候，多次调用内部函数，有可能会导致在动画过程中图片index标号和dot按钮不匹配，出现错误，内部代码也多运行了很多次，浪费内存。在内部触发click的函数中增加一个标志位，动画期间click无效即可。

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

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-一个用原生JS造的轮播图插件全部内容，希望文章能够帮你解决javascript代码实例教程-一个用原生JS造的轮播图插件所遇到的问题。

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

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