自写轮播组件

//请在userFlie中传入自己需要的对象
	//构造函数
	//自己传入对象，对象需包含属性：{
//	Imgarr(对象数组)
//	num(常量)
//	父级元素
//}样式请根据自己喜好在objSlide中修改,类名：上箭头：arow_prev，下箭头：arow_next，分页器：banner_nav
// 例：var obj = {
// 	Imgarr: ["./img2/i1.jpeg",
// 		"./img2/i2.jpeg",
// 		"./img2/i3.jpeg",
// 		"./img2/i4.jpeg",
// 		"./img2/i5.jpeg",
// 		"./img2/i6.jpeg"
// 	],
// 	num: 0,
// 	bannerBox: document.getElementById("box1")
// }
function ChangeImg(obj) {
	if(!obj) {
		throw Error("请传入参数对象")
	} else {
		this.odiv = null;
		this.spanleft = null;
		this.spanright = null;
		this.divban = null;
		this.oul = null;
		this.obj = obj;
		//this.m=0;
		this.init()
	}
}

//执行函数	
ChangeImg.prototype.init = function() {
	var that = this;
	this.createDiv();
	this.createDivban();
	this.createspanleft();
	this.createspanright();
	this.createIndexUl();
	this.createIndexLi();
	this.autoPlay();
	$.addEvevt(this.spanright, "click", function() {
		that.next();
	}, false);
	$.addEvevt(this.spanleft, "click", function() {
		that.pre();
	}, false);
	$.addEvevt(this.divban, "mouseover", function() {
		that.divban.classList.add("ban");
		that.spanright.classList.remove("spanx");
		that.spanleft.classList.remove("spanx");
		that.clearAutoPlay();
	}, false);
	$.addEvevt(this.divban, "mouseout", function() {
		this.classList.remove("ban");
		$.addClass(that.spanright, "spanx");
		$.addClass(that.spanleft, "spanx");
		that.autoPlay();
	}, false);
	for(var i = 0; i < (this.obj.Imgarr).length; i++) {
		this.xli[i].index = i;
		this.xli[i].onmouseover = function() {
			for(var i = 0; i < (that.obj.Imgarr).length; i++) {
				that.xli[i].classList.remove("liActive");
			}
			that.obj.num = this.index;
			this.classList.add("liActive");
			that.odiv.style.backgroundImage = "url(" + that.obj.Imgarr[this.index] + " )";
		}

	}
};
ChangeImg.prototype.createDiv = function() {
	var odivx = document.createElement("div");
	odivx.classList.add("odivx");
	odivx.style.backgroundImage = "url(" + this.obj.Imgarr[this.obj.num] + " )";
	this.obj.bannerBox.appendChild(odivx);
	this.odiv = odivx;
};
ChangeImg.prototype.createDivban = function() {
	var divban = document.createElement("div");
	divban.id = "bannerBox";
	this.odiv.insertBefore(divban, this.spanleft); //父节点.insertBefore(要插入节点,插入这个节点之前)
	this.divban = divban;
}
ChangeImg.prototype.createspanleft = function() {
	var spanleft = document.createElement("span");
	spanleft.classList.add("arow_prev");
	spanleft.classList.add("spanx");
	spanleft.style.cursor = "pointer";
	this.divban.appendChild(spanleft);
	this.spanleft = spanleft;
	//alert(333);			
};
ChangeImg.prototype.createspanright = function() {
	var spanright = document.createElement("span");
	spanright.classList.add("arow_next");
	spanright.classList.add("spanx");
	spanright.style.cursor = "pointer";
	this.divban.appendChild(spanright); //加强绑定
	this.spanright = spanright;
	//alert(444);		
}
ChangeImg.prototype.createIndexUl = function() {
	var oul = document.createElement("ul");
	oul.style.listStyle = "none";
	oul.id = "ulx";
	this.divban.appendChild(oul);
	this.oul = oul;
	//alert(555);
}
ChangeImg.prototype.createIndexLi = function(arr) {
	for(i = 0; i < (this.obj.Imgarr).length; i++) {
		var oLi = document.createElement("li");
		oLi.style.cursor = "pointer";
		this.oul.appendChild(oLi);
		oLi.innerText = i + 1;
		oLi.classList.add("banner_nav");
		//alert(666);
	}
	this.xli = this.oul.getElementsByTagName("li");
}
ChangeImg.prototype.next = function() {
	this.obj.num++; //在这里取到了构造函数里面的m
	if(this.obj.num > (this.obj.Imgarr).length - 1) {
		this.obj.num = 0
	}
	this.indexClear();
	this.changeStyle();
}
ChangeImg.prototype.pre = function() {
	this.obj.num--;
	if(this.obj.num < 0) {
		this.obj.num = (this.obj.Imgarr).length - 1;
	}
	this.indexClear();
	this.changeStyle();
}
ChangeImg.prototype.autoPlay = function() {
	var that = this;
	this.timer = setInterval(function() {
		that.next();
	}, 2000)

}
ChangeImg.prototype.clearAutoPlay = function() {
	clearInterval(this.timer);
	//alert(22222);
}

ChangeImg.prototype.changeStyle = function() {
	this.xli[this.obj.num].classList.add("liActive");
	this.odiv.style.backgroundImage = "url(" + this.obj.Imgarr[this.obj.num] + " )";
}
ChangeImg.prototype.indexClear = function() {
	for(i = 0; i < (this.obj.Imgarr).length; i++) {
		this.xli[i].classList.remove("liActive");
	}
}
var bx = new ChangeImg(obj);
仅有js文件，按所需传入对象即可，调试过程也有所保留，希望可以帮助到大家，整体组件可私信我，思维较为局限，仅供交流，有改进的地方还请指正，谢谢