有bug找不出来,求大神解救,双击或者快速点击next或者prev的时候小圆点跟不上,对应不上图片
window.onload = function(){
var index = 1;
var container = document.getElementsByClassName('container')[0];
var list = document.getElementsByClassName('list')[0];
var prev = document.getElementsByClassName('prev')[0];
var next = document.getElementsByClassName('next')[0];
var bottons = document.getElementsByClassName('bottons')[0].getElementsByTagName('span');
var animated = false;
var timer ;
function animate (offset){
animated = true;
var newLeft = parseInt(list.style.left) + offset;
var time = 300;
var interval = 10;
var speed = offset/(time/interval);
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,interval);
}else{
animated = false;
list.style.left = newLeft + 'px';
if (newLeft > -1024) {
list.style.left = -5120 + 'px';
}
if (newLeft < -5120) {
list.style.left = -1024 + 'px';
}
}
}
go();
}
function play(){
timer = setInterval(function(){
next.onclick();
},3000);
}
function stop(){
clearInterval(timer);
}
function showbotton(){
for(var i = 0 ; i < bottons.length; i++){
if (bottons[i].className == 'on') {
bottons[i].className = '';
break;
}
}
bottons[index-1].className = 'on';
}
next.onclick = function(){
if (index == 5) {
index = 1;
}else{
index += 1;
}
if (!animated) {
animate(-1024);
}
showbotton();
}
prev.onclick = function(){
if (index == 1) {
index = 5;
}else{
index -= 1;
}
if (!animated) {
animate(1024);
}
showbotton();
}
for (var i = 0; i < bottons.length; i++) {
bottons[i].onclick = function(){
// if (this.className == 'on') {
// return;
// }
var myIndex = parseInt(this.getAttribute('index'));
var offset = -1024 * (myIndex - index);
index = myIndex;
showbotton();
if (!animated) {
animate(offset);
}
}
}
container.onmouseover = stop;
container.onmouseout = play;
play();
}
