我无限滚动了一轮后会出现图片位置不一样,比如原来的index=1的图片变到了index=3的位置
我无限滚动了一轮后会出现图片位置不一样,第一轮的情况正常,但是到了第二轮的时候,比如按下向右箭头原来的index=1的图片变到了index=3的位置或者其他位置,按下左箭头也会出现这样的情况.
window.onload=function(){
var container=document.getElementById('container');
var list=document.getElementById('list');
var buttons=document.getElementById('buttons').getElementsByTagName('span');
var next=document.getElementById('next');
var prev=document.getElementById('prev');
var index=1;
function animate(offset){
var newLeft=parseInt(list.style.left)+offset;
list.style.left=newLeft+'px';
if(newLeft<-6000){
list.style.left=-1000+'px';
}
if(newLeft>-1000){
list.style.left=-6000+'px';
}
}
function showButton(){
for(var i=0;i<buttons.length;i++){
if(buttons[i].className=='on'){
buttons[i].className='';
break;
}
}
buttons[index-1].className='on';
}
next.onclick=function(){
if(index==5){
index=1;
}
else{
index+=1;
}
animate(-1000);
showButton();
}
prev.onclick=function(){
if(index==1){
index=5;
}
else{
index-=1;
}
animate(1000);
showButton();
}
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=-1000*(myIndex-index);
animate(offset);
index=myIndex;
showButton();
}
}
}