var switchtime=5000;	//切换时间
var movespeed=20;		//切换速度
var key = 0;  			//控制播放张数
var curImgIndex = 0; 		// 控制小方块

function animate(obj,target)
{
	clearInterval(obj.timer);

	var speed = obj.offsetLeft<target ?movespeed:-movespeed;

	obj.timer = setInterval(function() 
	{
		var result = target - obj.offsetLeft;
		obj.style.left = obj.offsetLeft + speed + "px";
		if(Math.abs(result)<=movespeed)
		{
			clearInterval(obj.timer);
			obj.style.left = target + "px";
		}
	},20)
}

window.onload = function()
{
   // 获取元素
	var box = document.getElementById("dvslider");  // 大盒子
	var ul = document.getElementById("ulslimgs");
	var ol = document.getElementById("olslbtns");
	var ulLis = ul.children;
	var timer = null;   // 轮播图的定时器
	var imgWidth = ulLis[0].clientWidth;

	console.log(ulLis.length);

	//设置切换小原点
	var olLis = ol.children;

	for(var i=0; i<olLis.length;i++)
	{
		olLis[i].index = i;
		olLis[i].onmouseover = function(){
			for(var j=0;j<olLis.length;j++)
			{
				olLis[j].className = "";
			}
			this.className = "current";
			animate( ul,-this.index*imgWidth )
			curImgIndex = key = this.index;
		}
	}
	timer = setInterval(autoplay,switchtime);
	  
	function autoplay() 
	{
		key++;
		if(key>ulLis.length - 1)
		{
			ul.style.left = 0;
			key = 1;
		}
		animate( ul,-key*imgWidth );

		curImgIndex++;
		if( curImgIndex>olLis.length-1 )
		{
			curImgIndex = 0;
		}
		
		for(var i=0;i<olLis.length;i++)
		{
			if( curImgIndex==i )
				olLis[curImgIndex].className = "current";
			else
				olLis[i].className = "";
		}
	}

	box.onmouseover = function() {
		clearInterval(timer);
	}
	box.onmouseout = function() {
		timer = setInterval(autoplay,switchtime);
	}
}