< script type = "text/javascript" > window.onload = function() { ? ?var width = window.screen.width; ? ?var container = document.getElementById('container'); ? ?var list = document.getElementById('list'); ? ?var buttons = document.getElementById('buttons'); ? ?var span = document.getElementsByTagName('span'); ? ?var img = document.getElementsByTagName('img'); ? ?var height = img[0].height; ? ?var prev = document.getElementById('prev'); ? ?var next = document.getElementById('next'); ? ?var len = 4; ? ?var index = 1; ? ?var animated = false; ? ?var interval = 3000; ? ?var timer; ? ?container.style.width = width + 'px'; ? ?container.style.height = height + 'px'; ? ?img[0].style.width = width + 'px'; ? ?img[1].style.width = width + 'px'; ? ?img[2].style.width = width + 'px'; ? ?img[3].style.width = width + 'px'; ? ?img[4].style.width = width + 'px'; ? ?img[5].style.width = width + 'px'; ? ?list.style.width = 6 * width + 'px'; ? ?list.style.left = -width + 'px'; ? ?buttons.style.left = (width - 124) / 2 + 'px'; ? ?buttons.style.top = (height - 80) + 'px'; ? ?function sho_button() { ? ? ? ?for (var i = 0; i < span.length; i++) { ? ? ? ? ? ?if (span[i].className == 'on') { ? ? ? ? ? ? ? ?span[i].className = ''; ? ? ? ? ? ? ? ?break ? ? ? ? ? ?} ? ? ? ?} ? ? ? ?span[index - 1].className = "on" ? ?} ? ?function animate(offset) { ? ? ? ?animated = true; ? ? ? ?var time = 900; ? ? ? ?var inteval = 20; ? ? ? ?var speed = offset / (time / inteval); ? ? ? ?var newleft = parseInt(list.style.left) + offset; ? ? ? ?function go() { ? ? ? ? ? ?if ((speed < 0 && parseInt(list.style.left) > newleft) || (speed > 0 && parseInt(list.style.left) < newleft)) { ? ? ? ? ? ? ? ?list.style.left = speed + parseInt(list.style.left) + 'px'; ? ? ? ? ? ? ? ?setTimeout(go, inteval) ? ? ? ? ? ?} else { ? ? ? ? ? ? ? ?animated = false; ? ? ? ? ? ? ? ?list.style.left = newleft + 'px'; ? ? ? ? ? ? ? ?var left = parseInt(list.style.left); ? ? ? ? ? ? ? ?if (left > -width) { ? ? ? ? ? ? ? ? ? ?var new_left = -width * len list.style.left = new_left + 'px' ? ? ? ? ? ? ? ?} ? ? ? ? ? ? ? ?var new_left = -width * len ? ? ? ? ? ? ? ?if (left < new_left) { ? ? ? ? ? ? ? ? ? ?list.style.left = -width + 'px' ? ? ? ? ? ? ? ?} ? ? ? ? ? ?} ? ? ? ?} ? ? ? ?go() ? ?} ? ?next.onclick = function() { ? ? ? ?if (animated) { ? ? ? ? ? ?return ? ? ? ?} ? ? ? ?if (index == 4) { ? ? ? ? ? ?index = 1 ? ? ? ?} else { ? ? ? ? ? ?index += 1 ? ? ? ?} ? ? ? ?sho_button(); ? ? ? ?if (!animated) { ? ? ? ? ? ?animate( - width) ? ? ? ?} ? ?} ? ?prev.onclick = function() { ? ? ? ?if (animated) { ? ? ? ? ? ?return ? ? ? ?} ? ? ? ?if (index == 1) { ? ? ? ? ? ?index = 4 ? ? ? ?} else { ? ? ? ? ? ?index -= 1 ? ? ? ?} ? ? ? ?sho_button(); ? ? ? ?if (!animated) { ? ? ? ? ? ?animate(width) ? ? ? ?} ? ?} ? ?for (var i = 0; i < span.length; i++) { ? ? ? ?span[i].onclick = function() { ? ? ? ? ? ?if (animated) { ? ? ? ? ? ? ? ?return ? ? ? ? ? ?} ? ? ? ? ? ?if (this.className == 'on') { ? ? ? ? ? ? ? ?return ? ? ? ? ? ?} ? ? ? ? ? ?var myIndex = parseInt(this.getAttribute('index')); ? ? ? ? ? ?var offset = -width * (myIndex - index); ? ? ? ? ? ?if (!animated) { ? ? ? ? ? ? ? ?animate(offset) ? ? ? ? ? ?} ? ? ? ? ? ?index = myIndex; ? ? ? ? ? ?sho_button() ? ? ? ?} ? ?} ? ?function play() { ? ? ? ?timer = setInterval(function() { ? ? ? ? ? ?next.onclick(); ? ? ? ? ? ?play() ? ? ? ?}, ? ? ? ?3000) ? ?} ? ?function stop() { ? ? ? ?clearInterval(timer) ? ?} ? ?container.onmouseover = stop; ? ?container.onmouseout = play; ? ?play()} < /script>/