動態更改變量

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(''));