Js中利用面向对象实现轮播图

利用面向对象实现轮播图，按钮切图，及延时器自动切图。图片请自行准备啦，

引入js文件，该文件是一个封装多属性运动函数。

		//data传入一个对象，key对应ele的样式属性，value对应ele的属性值,callback回调函数
		function move(ele, data, callback) {
			clearInterval(ele.t);
			//将for in 放入计时器中，节省性能，每次计时器开启，再进行for in的操作。
			ele.t = setInterval(function() {
				//1、设置目标到达状态
				var mySwitch = true;
				//for..in遍历对象，i为样式attr，data[i]为对象的value; 对应目标值target
				for (var i in data) {
					//获取元素的当前样式
					var iNow = parseInt(getStyle(ele, i));
					//设置步长(每次改变的值),每次为现在值和目标值的十分之一，speed永远不会为0
					var speed = (data[i] - iNow) / 10;
					//判断步长，小于0向下取整，大于0向上取整
					// if (speed < 0) {
					// 	speed = Math.floor(speed);
					// } else {
					// 	speed = Math.ceil(speed);
					// }
					// 下方简写
					speed = speed < 0 ? Math.floor(speed) : Math.ceil(speed);
					//开启之后，关闭之前，作一个判断
					//2、当有一个属性没到达目标时，改变状态，不清除计时器
					if (iNow != data[i]) {
						mySwitch = false;
					}
					ele.style[i] = iNow + speed + "px";
				}
				//3、(for循环结束)所有目标达到状态时清除计时器
				if (mySwitch) {
					//清除计时器，动画结束
					clearInterval(ele.t);
					//如果传入了callback，就执行。如果没有这个就不执行
					callback && callback();
				}
			}, 30)
		}


		//获取样式兼容写法
		function getStyle(ele, attr) {
			if (getComputedStyle) {
				return getComputedStyle(ele, false)[attr]; //false表示非伪元素
			} else {
				return ele.currentStyle[attr];
			}
		}