var wrap = document.getElementById('wrap'),
		pic = document.getElementById('pic'),
		list = document.getElementById('list').getElementsByTagName('li'),
		index = 0,
		timer = null;
	var alength = list.length;
	var piclist = pic.getElementsByTagName('li');
	timer = setInterval(autoplay, 1000);
	for (var i = 0; i < alength; i++) {
		list[i].aa = i;
		list[i].onmouseover = function() {
			clearInterval(timer);
			var thisid = this.aa;
			showpic(thisid);
		};
		list[i].onmouseout = function() {
			timer = setInterval(autoplay, 1000);
		}

	}

	function autoplay() {
		index++;
		if (index >= alength) {
			index = 0;
		}
		showpic(index);
	}

	function showpic(curindex) {
			if (curindex > alength) {
				curindex = 0;
			}
			for (var i = 0; i < alength; i++) {
				list[i].className = " ";
				piclist[i].style.display = "none";
			}
			list[curindex].className = "on";
			piclist[curindex].style.display = "block";
			index = curindex;
	}