jquery - 单击时更改图像

Question

我找到了这段代码，但我不想随意更改。我不知道如何按顺序更改图像。请帮助我!

HTML

 <div class=change><img id=bg src="items/01.jpg" alt="" /></div>

JQUERY:

var images = ["02.jpg","03.jpg","01.jpg"];

$(function() {
    $('.change').click(function(e) {
    var image = images[Math.floor(Math.random()*images.length)];
        $('#bg').parent().fadeOut(200, function() {
            $('#bg').attr('src', 'items/'+image); 
              $(this).fadeIn(200);
        });
    });
});

Answer 1

您需要使用加 1 的 index 而不是随机的。 当索引达到数组长度时重置索引。

var images = ["02.jpg","03.jpg","01.jpg"];

$(function() {
    index = 0;
    $('.change').click(function(e) {
    var image = images[index++];
    if(index == images.length) 
       index = 0;
        $('#bg').parent().fadeOut(200, function() {
            $('#bg').attr('src', 'items/'+image); 
              $(this).fadeIn(200);
        });
    });
});