window.onload = function(){
	var container = document.getElementById("container"),
		list = document.getElementById("list"),
		btn =document.getElementById("btn").getElementsByTagName("span"),
		prev = document.getElementById("prev"),
		next = document.getElementById("next"),
		index = 1,
		animated = false,
		timer;
		
	//圆点的函数
	function showButton(){
		//清除圆点属性
		for(var i = 0; i < btn.length; i++){
			if(btn[i].className == 'on'){
				btn[i].className = '';
				break;
			}
		}
		btn[index - 1].className = 'on';
	}
	//点击圆点切换图片
	for(var i = 0; i < btn.length; i++){
		btn[i].onclick = function(){
			//条件成立，退出函数，后面的将不执行
			if(this.className == 'on'){
				return;
			}
			//获取当前点击的index值
			var myIndex = parseInt(this.getAttribute('index'));
			var offset = -960 * (myIndex - index);
			animate(offset);
			index = myIndex;
			if(!animated){
				showButton();
			}
		}
	}
	//封装点击箭头切换图片的函数
	function animate(offset){

		animated = true;
		var newLeft = parseInt(list.style.left) + offset;
		var time = 300;		//位移总时间
		var interval = 5;		//位移间隔时间
		var speed = offset/(time/interval);  //每次位移量
		
		function go(){
			if(speed < 0 && parseInt(list.style.left) > newLeft || speed > 0 && parseInt(list.style.left) < newLeft){
				list.style.left = parseInt(list.style.left) + speed + "px";
				setTimeout(go,interval);
			}else{
				animated = false;
				list.style.left = newLeft + "px";
				//无限滚动
				if(newLeft > -960){
					list.style.left = -4800 + "px";
				}
				if(newLeft < -4800){
					list.style.left = -960 + "px";
				}
			}
		}
			go();
	}
	
	//自动切换函数
	function play(){
		timer = setInterval(function(){
			next.onclick();
		},1500);
	}
	//清除定时器
	function stop(){
		clearInterval(timer);
	}
	
	//点击右箭头
	next.onclick = function(){
		if(!animated){
		if(index == 5){
			index = 1;
		}else{
			index += 1;
		}
		showButton();
			animate(-960);
		}
	}
	//点击左箭头
	prev.onclick = function(){
		if(!animated){
		if(index == 1){
			index = 5;
		}else{
			index -= 1;
		}
		showButton();
			animate(960);
		}
	}
	container.onmouseover = stop;
	container.onmouseout = play;
	play();
}

这里有个bug求解，点击圆点图片跳转没问题，但是不会高亮，要点两次才会亮起来，，求解