js原生之轮播封装，ES6语法，箭头函数，构造函数。

样式在以前的一个文章，这里主要封装。

html+css*样式点击这里

es6构造函数+箭头函数封装

class lunbo {
//这里是es6的构造函数，class语法糖。
	constructor(arg) {
	//定义实例属性，方法中可以调用
		this.oWrap = document.getElementById("wrap");
		this.oUl = document.getElementById("ul");
		this.oLi = document.getElementsByTagName("li");
		this.oSpan = document.getElementsByTagName("span");
		this.oul = document.getElementById("ul2");
		this.oli = this.oul.children;
		this.x = this.oLi[0].offsetWidth;
		this.oUl.style.width = this.x * this.oLi.length + "px";
		this.oUl.style.height = 500 + "px";
		this.i = 0;
		this.yuan();
		this.start();

		//左右箭头
		this.left();
		//划上时暂停
		this.stop();
	}
	yuan() {
		//给三个圆设置单击事件
		console.log(this);
		for (let j = 0; j < this.oli.length; j++) {
			this.oli[j].onclick = () => {
				// oUl.style.left=j*x+"px";
				startMove(this.oUl, {
					left: -j * this.x
				});
				for (var y = 0; y < this.oli.length; y++) {
					this.oli[y].className = "";
				}
				this.oli[j].className = "li";
				this.i = j;
			}
		}
	}
	//方法之间不需要逗号分隔，方法直接调用，不需要function关键字
	start() {
		this.oWrap.timer = setInterval(() => {
			this.i++;
			if (this.i == 4) {
				this.oUl.style.left = 0 + "px";
				this.i = 1;
			}
			for (var j = 0; j < this.oli.length; j++) {
				this.oli[j].className = "";
			}
			if (this.i == 3) {
				this.oli[0].className = "li";
			} else {
				this.oli[this.i].className = "li";
			}
			startMove(this.oUl, {
				left: -this.i * this.x
			});
		}, 1000);
	}
	//左右箭头
	left() {
		this.oSpan[0].onclick = () => {
			this.i++;
			if (this.i == 4) {
				this.oUl.style.left = 0 + "px";
				this.i = 1;
			}
			for (var j = 0; j < this.oli.length; j++) {
				this.oli[j].className = "";
			}
			if (this.i == 3) {
				this.oli[0].className = "li";
			} else {
				this.oli[this.i].className = "li";
			}
			startMove(this.oUl, {
				left: -this.i * this.x
			});
		};
		this.oSpan[1].onclick = () => {
			this.i--;
			if (this.i == -1) {
				this.oUl.style.left = -1500 + "px";
				i = 2;
			}
			for (var j = 0; j < this.oli.length; j++) {
				this.oli[j].className = "";
			}
			if (this.i == 3) {
				this.oli[0].className = "li";
			} else {
				this.oli[this.i].className = "li";
			}
			startMove(this.oUl, {
				left: -this.i * this.x
			});
		};
	}

	//划上时暂停
	stop() {
		this.oWrap.onmouseover = () => {
			clearInterval(this.oWrap.timer);
		}
		this.oWrap.onmouseout = () => {
			this.oWrap.timer = setInterval(() => {
				this.i++;
				if (this.i == 4) {
					this.oUl.style.left = 0 + "px";
					this.i = 1;
				}
				for (var j = 0; j < this.oli.length; j++) {
					this.oli[j].className = "";
				}
				if (this.i == 3) {
					this.oli[0].className = "li";
				} else {
					this.oli[this.i].className = "li";
				}
				startMove(this.oUl, {
					left: -this.i * this.x
				});
			}, 1000)
		}
	}


}

上面函数还缺少一个startMove，移动的封装

//这里用的es5语法
function startMove(obj, json, fn) {
	clearInterval(obj.timer);
	obj.timer = setInterval(function() {
		var flag = true; //假设所有属性都达到目标值，这是一个开关。
		for(var attr in json) {
			var iTarget = json[attr];
			if(attr == "opacity"){//透明度兼容
				var iCur = parseInt(getStyle(obj, attr)*100);
			}else{
				var iCur = parseInt(getStyle(obj, attr));
			}
			
			var iSpeed = (iTarget - iCur) / 7;//移动和透明度变化
			iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
			
			if(attr == "opacity"){
				obj.style.opacity = (iCur + iSpeed)/100;
				obj.style.filter = "alpha(opacity="+(iCur + iSpeed)+")";
			}else{
				obj.style[attr] = iCur + iSpeed + "px";
			}
			//只要有一个达到目标值，定时器就会被清除,会导致部分属性没有达到目标值
			//所有属性都达到目标值时，清除定时器
			if(iCur != iTarget) { //假设是否成立由此判断
				flag = false;
			}
		}

		if(flag) { //如果假设成立，清除定时器
			clearInterval(obj.timer);
			if(fn) {
				fn();
			}
		}

	}, 20)
}

//这个是js获取style的封装。
function getStyle(obj, attr) {
	if(obj.currentStyle) {
		return obj.currentStyle[attr];
	}
	return getComputedStyle(obj, null)[attr];
}

就这些了，可以一起探讨。样式做的比较丑哈