window.onload=function(){//页面加载完成后
	
	
	slidellx("slide");//参数为字符串是外层容器的id,可以多次调用
	slidellx("slide_two");
	
	//方法
	function slidellx(slideid){
	var slide=document.getelementbyid(slideid);//容器
	var slidelis=slide.getelementsbytagname('li');
	var conut=slidelis.length;//实际图片数量
	if(conut<2){
		return false;//如果图片数量少于2就不开启轮播节约资源
	}
	var imgs=slide.getelementsbytagname("img");
	var firstsrc=imgs[0].getattribute("src");//第一张图的路径
	var lastsrc=imgs[imgs.length-1].getattribute("src");//最后一张图的路径
	var offset=slide.clientwidth;//每次滚动的距离
	var index=1;//当前是第一张图
	var slideul=slide.getelementsbytagname("ul")[0];//ul
	var timer;//自动轮播定时器对象
	
	//开头插入最后一张图
	var firstli=document.createelement("li");
	var firstimg=document.createelement("img");
	firstimg.setattribute("src",lastsrc);
	firstli.appendchild(firstimg);
	slideul.insertbefore(firstli,slideul.firstchild);//创建li并插入最后一张图的路径添加第一张图之前
	slideul.style.transform="translatex("+(-offset)+"px)";//ul滚动到第一张图的位置
	
	//末尾插入第一张图
	var lastli=document.createelement("li");
	var lastimg=document.createelement("img");
	lastimg.setattribute("src",firstsrc);
	lastli.appendchild(lastimg);
	slideul.appendchild(lastli);
	
	
	//创建圆点控制按钮
	var circle_btn=document.createelement("div");
		circle_btn.setattribute("class","circle_btn");
	for(var i=0;i<conut;i++){ //创建等同于图片数的按钮
		var cbtn=document.createelement("button");
		circle_btn.appendchild(cbtn);
	}
	slide.appendchild(circle_btn);
	//圆点绑定点击事件
	var circles=array.prototype.slice.call(circle_btn.getelementsbytagname("button"));
	circles[0].setattribute("class","active");//第一个圆点高亮
	circles.foreach(function(e,i){
		e.onclick=function(){
			closeautoslide();
			opentransition();
			index=i+1;
			goslide();
			beactive(this);
		}
	});
	
	//创建上一个按钮,并且绑定点击事件
	
	var btn_prev=slide.getelementsbyclassname("prev_btn")[0];
	btn_prev.onclick=function(){
		closeautoslide();
		opentransition();//开启过渡
		index--;
		goslide();
		if(index<1){
			index=conut;
			beactive(circles[index-1]);
			settimeout(function(){
			closetransition();
			goslide();
			},600)
		}else{
			beactive(circles[index-1]);
		}
	}
	
	//创建下一个按钮，并绑定点击事件
	var btn_next=slide.getelementsbyclassname("next_btn")[0];
	btn_next.onclick=function(){
		opentransition();//开启过渡
		index++;
		goslide();
		if(index>conut){
			index=1;
			beactive(circles[index-1]);
			settimeout(function(){
			closetransition();
			goslide();
			},600)
		}else{
			beactive(circles[index-1]);
		}
	}
	
	//定时器自动轮播
	
	openautoslide();//默认开启自动轮播
	function openautoslide(){
		if(timer){
			window.clearinterval(timer);
		}
		timer=setinterval(function(){
		beactive(circles[index-1]);
		btn_next.onclick();
		},3000)//轮播间隔时间
	}
	//暂停自动轮播,并且在6秒后再次开始轮播
	function closeautoslide(){
		window.clearinterval(timer);
		settimeout(function(){
			openautoslide();
		},6000);//暂停后再次开始的时间
	}
	//用户操作时暂停自动
	btn_next.onmousedown=function(){
		closeautoslide();
	}
	btn_prev.onmousedown=function(){
		closeautoslide();
	}
	//为圆点添加高亮，高亮效果可以去修改对应的css
	function beactive(btn){
		circle_btn.getelementsbyclassname("active")[0].setattribute("class","");
		btn.setattribute("class","active");
	}
	//打开过渡效果
	function opentransition(){
		slideul.style.transition="all .6s";//完成动画的时间为600毫秒如果更改这里请把上面的600也相应的修改
	}
	//关闭过渡效果
	function closetransition(){
		slideul.style.transition="none";
	}
	//滚动到index相应的位置
	function goslide(){
		slideul.style.transform="translatex(-"+index*offset+"px)";
	}
		
	
	
	//响应式，根据浏览器窗口变化
	slideul.style.width=slidelis.length*100+"%";
	var liwidth=100/slidelis.length+"%";
	for(var i=0;i<slidelis.length;i++){
		slidelis[i].style.width=liwidth;
	}
	window.onresize=function(){
		closetransition();//关闭动画
		offset=slide.clientwidth;
		goslide();//重置ul的位置
	}
}

}