< 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>/