Css用z-index实现轮播图（下）

/********** js部分**********/

公共变量部分：

    声明一个index变量(根据index对li和小圆点point添加class属性active，所有index值要和它们遍历的下标一致)；i获取所有li；获取所有小圆点point。

公共方法部分：

    goIndex()，根据index给li和小圆点添加class属性active。

    clearActive()，清除所有li和小圆点的class属性中的第二属性active，让他们回归只有一个属性。 goIndex()方法开始时调用，每次添加class属性active前清空之前存在的active。

点击小圆点事件：

     传入参数event，将点击的当前对象传进去，用this获取当前对象的属性data-index的值，赋值给公共变量index，调用 goIndex()函数。

点击左右按钮事件：

 传入参数event，将点击的当前对象传进去，用this获取当前对象的属性data-target的值，判断是向左还是向右。

 向左注意两种情况，当前展示图片下标为0时，向左要将index赋值成最后一个li图片的index，li集合items的数组的长度减1就是这个index。另一种是正常情况，将index减1即可。

向右也要注意两种情况，当前展示图片为最后一个图片时，index赋值为0。另一种正常情况，index加1即可。

计时器：两个方法setInterval()或setTimeout()实现

             每隔一段时间调用向右按钮翻页操作

$(document).ready(function(){
	//轮播图
	var index=0;
	var items=document.getElementsByClassName("slide-item");
	var points=document.getElementsByClassName("page_active");
	var clearActive=function(){
		for(i=0;i<items.length;i++){
			items[i].className="slide-item";
		}
		for(i=0;i<points.length;i++){
			points[i].className="page_active";
		}
	};
	var goIndex=function(){
			clearActive();
			items[index].className="slide-item active";
			points[index].className="page_active active";
		}

	$(".page_active").click(function(event){
		index=this.getAttribute("data-index");
		goIndex();
	});
	$(".page").click(function(event){
		var cc=this.getAttribute("data-target");
		if(cc=="prev"){
			var el=document.getElementsByClassName("slide-item active");
			var itemIndex=el[0].getAttribute("data-index");
			if(itemIndex!=0){		
				index=itemIndex-1;
				goIndex();
			}else{
				//最大的item-index赋值给index		
				index=items.length-1;
				goIndex();
			}		
		}else if(cc=="next"){
			var el=document.getElementsByClassName("slide-item active");
			var itemIndex=el[0].getAttribute("data-index");
			if(itemIndex!=items.length-1){
				var num=Number(itemIndex);
				index=num+1;
				goIndex();
			}else{
				index=0;
				goIndex();
			}
		}		
	});	
    //计时器
	var time=0;
	setInterval(function(){//每0.1s调用一次该函数，
		time++;
		if(time===50){//5s执行一次"翻页"操作
			var el=document.getElementsByClassName("slide-item active");
			var itemIndex=el[0].getAttribute("data-index");
			if(itemIndex!=items.length-1){
				var num=Number(itemIndex);
				index=num+1;
				goIndex();
			}else{
				index=0;
				goIndex();
			}	
			time=0;
		}
	},100)
});