点击更改图像 [英] change images on click

问题描述

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

I found this code but I dont want to change by random. I dont know how to change images by order. Please help me!

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

推荐答案

您需要使用索引递增1而不是随机。 在达到数组长度时重置索引。

You need to use index incremented by 1 instead of random. Reset index when it reaches array length.

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

这篇关于点击更改图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！