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

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

Answer 2

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

$(function() {
    $('.change').click(function(e) {

        var image = images[currentimg];
        currentimg++;
        if(currentimg > 2){
            currentimg = 0;
        }

        $('#bg').parent().fadeOut(200, function() {
            $('#bg').attr('src', 'items/'+image); 
            $(this).fadeIn(200);
      });
    });
});

これを試して。これはうまくいくはずです。