var Carousel=function(wrapID,src,alt,href,imgWidth){
	this.i=0;  //Picture count
	this.wrap=wrapID;  //The wrapping layer of rotation graph
	this.src=src;  //Source address of picture src
	this.alt=alt;  //alt description of the picture
	this.length=this.src.length;  //Number of pictures, excluding the first copy
	this.href=href;  //The href address of the a tag on the outer layer of the image img element
	this.timer=null;  //timer
	this.imgWidth=imgWidth;  //Width of a single picture
};
//Create a < div class ='imgcontainer '> < a href =' '> < img SRC =' 'ALT =' '> < / img > < / a >... < div >
//And insert the div into the package layer

Carousel.prototype.createAndAppendImg=function(){
	var str="";
	for(var i=0;i<this.length;i++){
		str+="<a href="+"'"+this.href[i]+"'"+"><img src="+"'"+
			this.src[i]+"'"+" alt="+"'"+this.alt[i]+"'"+"></a>";
	}
	//Here, the first image is copied for seamless link and inserted at the end of the div
	str+="<a href="+"'"+this.href[0]+"'"+"><img src="+"'"+this.src[0]+

		"'"+" alt="+"'"+this.alt[0]+"'"+"></a>";
	$("<div class='imgContainer'>"+str+"</div>").appendTo($(this.wrap));
};

//Internal logic when processing rotation
Carousel.prototype.move=function(){
	var size=this.length+1;
	if(this.i==size){
		$(".imgContainer").css({left:0});
		this.i=1;
	}
	if(this.i==-1){
		$(".imgContainer").css({left:-(size-1)*this.imgWidth});
		this.i=size-2;
	}
	if(this.i==size-1){
	//This judgment is to solve the problem that when you click to the last picture, the small circle does not switch to the on style
	//In this way, manually set the first small circle point to the selected on style
		$(this.wrap+" .num"+" li").eq(0).addClass("on").siblings().removeClass("on");	
	}else{
		$(this.wrap+" .num"+" li").eq(this.i).addClass("on").siblings().removeClass("on");
	}
	$(".imgContainer").stop().animate({left:this.i*-this.imgWidth},500);
};

//Autoplay method
Carousel.prototype.autoplay=function(intervalTime,animateSpeed){
	var that=this;
	that.timer=setInterval(function(){
		that.i++;
		that.move();
	}, intervalTime);
	//The hover() parameter in jQuery, the first parameter is the function equivalent to mouseover, and the second parameter is
	//Function equivalent to mouseout
	$(this.wrap).hover(function(){
		clearInterval(that.timer);
		},function(){
			 that.timer=setInterval(function(){
				that.i++;
				that.move();
		}, intervalTime);
	});			
};
//Set left and right buttons
Carousel.prototype.setLRbtn=function(){
	var that=this;
	$(that.wrap).find(".btn_l")[0].onclick=function(){
		that.i--;
		that.move();
	};
	$(that.wrap).find(".btn_r")[0].onclick=function(){
		that.i++;
		that.move();
	};
};
//Set small dots
Carousel.prototype.setLists=function(){
	var that=this;
	var str="";
	for(var i=0;i<this.length;i++){
		str+="<li></li>";
	}
	$(that.wrap).find(".num").append(str);
	$(that.wrap).find("li").first().addClass("on");
	$(that.wrap).find("li").hover(function(){
		var index=$(this).index();
		that.i=index;
		$(that.wrap+" .imgContainer").stop().animate({left:index*-600},500);
		$(this).addClass("on").siblings().removeClass("on");
	});
};

//Now you can set up a new instance of Carousel, as follows:
var banner=new Carousel("#banner",["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg"],["001","002","003","004"],["##","##","##","##"],600);
banner.createAndAppendImg();
banner.autoplay(2000);
banner.setLRbtn();
banner.setLists();