原生js封装无缝轮播功能

原生js封装无缝轮播插件，供大家参考，具体内容如下

说明：

这是一个使用原生js、es5语法写出的无缝轮播程序，代码中对相关api进行了封装，使得在引入该轮播js文件后，只需要在自己的js文件中添加两行代码即可在网页中实现一个基本的无缝轮播图效果。

基本使用步骤为：获取dom元素数组、向轮播对象中传参、轮播对象调用自动轮播方法。

除基本的定时器自动轮播功能外，该程序还支持设置过渡动画时间、设置鼠标移入元素自动轮播停止、设置点击左右侧边按钮时轮播、设置点击下方按钮时轮播功能。

该程序不需要依赖css、html文件、但需要你的css、html布局遵循一定的规则。

注意该程序不支持曲线过渡速度、且在将浏览器切换浏览器窗口后有时会出现轮播图错乱的bug，暂时找不到问题的所在。

该程序仅是我一个初学者对无缝轮播函数的简单封装，仅能够做学习和参考使用。

下面除轮播代码外，我还会给出示例程序。

运行效果：

思路：

根据轮播的方向确定所有轮播图元素的排列顺序，如果当前轮播图已到达所有轮播图的边界，则将相对方向上的最后一张轮播图瞬间移动到相应位置。
使用这种方法实现轮播图所需要的最少轮播图数为3张，针对轮播图数量为一张和两张的情况则需要对其单独处理，一张情况下，复制添加两张和当前轮播图相同的轮播图元素，两张情况下，需要按顺序对当前轮播图进行复制添加。

编译环境：

chrome 86.0.4240.183

代码：

slide.js 封装轮播图代码

test.js 测试示例js代码：

html、css示例代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。