轮播图

//轮播图 function animate (offset) { if (offset == 0) { return; } animated = true; var time = 300; var inteval = 10; var speed = offset/(time/inteval); var left = parseInt(list.style.left) + offset; var go = function (){ if ( (speed > 0 && parseInt(list.style.left) < left) || (speed < 0 && parseInt(list.style.left) > left)) { list.style.left = parseInt(list.style.left) + speed + 'px'; setTimeout(go, inteval); } else { //无限轮播 list.style.left = left + 'px'; if(left>-200){ list.style.left = -600 * len + 'px'; } if(left<(-600 * len)) { list.style.left = '-600px'; } animated = false; } } go(); } function showButton() { //上移显示左右箭头 for (var i = 0; i < buttons.length ; i++) { if( buttons[i].className == 'on'){ buttons[i].className = ''; break; } } buttons[index - 1].className = 'on'; } function play() { //自动播放 timer = setTimeout(function () { next.onclick(); play(); }, interval); } function stop() { //鼠标上移自动暂停 clearTimeout(timer); } next.onclick = function () { if (animated) { return; } if (index == 5) { index = 1; } else { index += 1; } animate(-600); showButton(); } prev.onclick = function () { //点击小圆点跳转到相应图片 if (animated) { return; } if (index == 1) { index = 5; } else { index -= 1; } animate(600); showButton(); } for (var i = 0; i < buttons.length; i++) { buttons[i].onclick = function () { if (animated) { return; } if(this.className == 'on') { return; } var myIndex = parseInt(this.getAttribute('index')); var offset = -600 * (myIndex - index); animate(offset); index = myIndex; showButton(); } } container.onmouseover = stop; container.onmouseout = play; play();