点击更改图像

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

您需要使用index递增1而不是随机.Reset当达到数组长度时的索引.

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);
        });
    });
});