<script>
window.onload=function() {
// body...
var prev=document.getElementById("prev");
var next=document.getElementById("next");
var list=document.getElementById("list");
var buttons=document.getElementById("buttons").getElementsByTagName("span");
var container=document.getElementById("container");
var index=1;
var timer;
var animated=false;
function shownButton(){
for (var i = 0; i < buttons.length ; i++) {
if( buttons[i].className == 'on'){
buttons[i].className = ;
/* prev和next每click一次，
就会清除一次前一个class为on的span元素，
所以没有必要再去循环下面的span*/
break;
}
// 或者直接遍历清除 buttons[i].className=""；
}
buttons[index -1].className="on";
}
function animate(offset){
var time = 300;
var inteval = 10;
var speed = offset/(time/inteval);
animated=true;
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 = parseInt(list.style.left) + speed + 'px';
setTimeout(go, inteval);
}
else
{
animated=false;
// list.style.left=newLeft+"px";
if (newLeft >-600) {
list.style.left=-3000+"px";
};
if (newLeft <-3000) {
list.style.left=-600+"px";
};
}
}
go();
};
prev.onclick=function(){
/*添加一个if判断index为1时，如果继续往前滚的话就让index返回第五个span
但是当快速点击arrow时会出现一种span点亮延迟的情况。可以尝试把判断index是否大于1或小于5的情况放进
判断是否animated的if语句中，先判断能不能点击，再点亮。
*/
if (!animated) {
if (index==1) {
index=5;
}else {
index -=1;
}
shownButton();
animate(600);
}
};
next.onclick=function(){
if (!animated) {
if (index==5) {
index=1;
}else {
index +=1;
}
shownButton();
animate(-600);
}
};
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick=function(){
//无关紧要
if (this.className=="on") {
return;
}
var myIndex=parseInt(this.getAttribute("index"));
var offset=-600*(myIndex-index);
if (!animated) {
animate(offset);
}
index=myIndex;
shownButton();
}
}
function play(){
timer=setInterval(function(){
next.onclick();
},2000);
}
function stop(){
clearInterval(timer);
}
play();
container.onmouseover=stop;
container.onmouseout=play;
}
</script>
