function f1() { var container = document.getElementById('container1'); var list = document.getElementById('list1'); var buttons = document.getElementById('buttons1').getElementsByTagName('span'); var prev = document.getElementById('prev1'); var next = document.getElementById('next1'); var index = 1; var len = 2; var animated = false; var interval = 3000; var timer; function animate (offset) { if (offset == 0) { return; } animated = true; var time = 600; 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>-260){ list.style.left = -260 * len + 'px'; } if(left<(-260 * len)) { list1.style.left = '-260px'; } 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 == 2) { index = 1; } else { index += 1; } animate(-260); showButton(); } prev.onclick = function () { if (animated) { return; } if (index == 1) { index = 2; } else { index -= 1; } animate(260); 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 = -260 * (myIndex - index); animate(offset); index = myIndex; showButton(); } } container.onmouseover = stop; container.onmouseout = play; play(); } function f2() { var container = document.getElementById('container'); var list = document.getElementById('list'); var buttons = document.getElementById('buttons').getElementsByTagName('span'); var prev = document.getElementById('prev'); var next = document.getElementById('next'); var index = 1; var len = 3; var animated = false; var interval = 3000; var timer; 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>-440){ list.style.left = -440 * len + 'px'; } if(left<(-440 * len)) { list.style.left = '-440px'; } 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 == 3) { index = 1; } else { index += 1; } animate(-440); showButton(); } prev.onclick = function () { if (animated) { return; } if (index == 1) { index = 3; } else { index -= 1; } animate(440); 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 =-440 * (myIndex - index); animate(offset); index = myIndex; showButton(); } } container.onmouseover = stop; container.onmouseout = play; play(); } function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } }}addLoadEvent(f1);addLoadEvent(f2);
添加回答
举报
0/150
提交
取消