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

动态更改变量

1 个答案: