原生js封装无缝轮播功能

原生js封装无缝轮播插件

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

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

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

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

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

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

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

运行效果：

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

编译环境：
Chrome 86.0.4240.183

代码：

slide.js 封装轮播图代码

(function(window, undefined) {
   
	
	// 获取元素css属性值
	function getCss(elem, attr) {
   
		return elem.currentStyle ? 
			elem.currentStyle[attr] : 
			window.getComputedStyle(elem, null)[attr];
	}
	
	// 去除字符串中的非数字，不包括负号
	function toInt(str) {
   
		var rex = /[^0-9]/ig;
		return Number((str[0] === '-' && str[1] !== '=') ? '-' + str.replace(rex, '') : str.replace(rex, ''));
	}
	
	// 封装动画函数，参数：dom对象、css属性值对象、动画执行时间、动画完成后回调
	function animation(elem, params, speed, callback) {
   
		for (var param in params) {
   
			(function(param) {
   
				
				var elemValue = toInt(getCss(elem, param)),
					targetValue = toInt(params[param]),
					currentDis = elemValue,
					unit = params[param].substr(params[param].indexOf('[A-Za-z]+') - 1);
				
				if (params[param].length > 2) {
   
					var prefix = params[param].substr(0, 2);
					
					if (prefix === '+=')
						targetValue = elemValue + targetValue;
					else if (prefix === '-=')
						targetValue = elemValue - targetValue;
				}
				
				var dis = (targetValue - elemValue) / speed,
					sizeFlag = targetValue < elemValue;
				
				var timer = setInterval(function() {
   
					
					elemValue = toInt(getCss(elem, param));
					
					if (sizeFlag) {
   
						if (currentDis <= targetValue) {
   
							clearInterval(timer);
							elem.style[param] = targetValue + unit;
						} else {
   
							currentDis += dis;
							elem.style[param] = currentDis + unit;
						}
					}
					else {
   
						if (currentDis >= targetValue) {
   
							clearInterval(timer);
							elem.style[param] = targetValue + unit;
						} else {
   
							currentDis += dis;
							elem.style[param] = currentDis + unit;
						}
					}
				}, 1);
				
			})(param);
		}
		
		if (typeof callback === 'function')
			callback();
	};
	
	
	// 向右轮播数组移动
	function rightRoundArrayMove() {
   
		
		var winsL