动态更改变量

Question

我正在尝试更改图像滑块中与图片对应的点的颜色。但是，因为我已经将变量imageCount定义为1，所以即使imageCount随着图像的滑动而增加，只有第一个点会发生变化。有没有办法解决？

var numImgs = $('#picbox img').length; 
var imageCount = 1; 
var dotMax = numImgs; 

function auto() { 
    if(imageCount == numImgs) { 
     currentImage.animate({marginLeft: '0px'}); 
     imageCount = 1; 
    } 
    else { 
     currentImage.animate({marginLeft: '-=850px'}); 
     imageCount++; 
    } 
}; 

var loopforever = window.setInterval(auto, 5000); 

while(dotMax--) { 
    $('#dots').append('<img class="dot" src="./images/dot.png" width="10px" height="10px" />'); 
}; 

$('.dot').each(function(i) { 
    $(this).attr('id', i+1); 
}); 

$('.dot').each(function(item) { 
    if($(this).attr('id') == imageCount) { 
     $(this).attr('src', './images/dotLight.png'); 
    }; 
}); 

Answer 1

这是伪代码...但我想你想这种事情发生......

var numImgs = $('#picbox img').length; 
var imageCount = 1; 
var dotMax = numImgs; 
var dots = []; 

function auto() { 
    if(imageCount == numImgs) { 
     currentImage.animate({marginLeft: '0px'}); 
     imageCount = 1; 
    } 
    else { 
     currentImage.animate({marginLeft: '-=850px'}); 
     imageCount++; 
    } 

    $('.dot').attr('src','./images/dot.png'); 
    $('.dot[ref='+imageCount+]).attr('src', './images/dotLight.png'); 
}; 

var loopforever = window.setInterval(auto, 5000); 


for (var i = 0; i < numImgs.length; i++) { 
    dots.push('<img class="dot" ref="'+i+'" src="" width="10px" height="10px" />'); 
}; 

$('#dots').append(dots.join(''));