window.onload = function()

{

	var picPlayer = document.getElementById("picPlayer")
	var picList = picPlayer.getElementsByTagName("li");
    var picTotal = picList.length;
	var btnContainer = document.getElementById("myBtn");
	var btnArr = [];
	var startNum = 0;
	var stopPlay = false;
	picPlayer.onmousemove = function(){stopPlay = true};
	picPlayer.onmouseout = function(){stopPlay = false};
	for(var i = 0; i<picTotal;i++)
	{
		btnArr[i] = btnContainer.appendChild(document.createElement("span"));
		btnArr[i].num = i;
		btnArr[i].onmouseover = function(){playPic(this.num)};
	}
	function playPic(n)
	{
		startNum = n;
		for(var i = 0; i<picTotal;i++)
	    {
			if(i == n)
			{
				picList.item(i).className = "currentPlay";
				btnArr[i].className = "currentBtn"
			}
		    else
			{
				picList.item(i).className = "";
				btnArr[i].className = ""
			}
	    }
	    
	}
	function timer()
	{
		if(!stopPlay)
		{
			playPic(startNum)
		    if(startNum < picTotal-1)
		    {
			    startNum++;
		    }
		    else
		    {
		        startNum = 0;	
		    }
		}
	    setTimeout(timer,4000)	
	}
	timer()

}