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

试试这个。这应该适合你。

点击更改图像

2 个答案: