Question

我在Stack Overflow上找到了这段代码：change images on click。

它对我有用。我希望它是随机的，但我怎么能阻止它重复图像。当用户点击所有图像时，应首先重复图像。

我用我的代码制作了一个JSfiddle：http://jsfiddle.net/gr3f4hp1/

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

跟踪您生成的数字，如果重复，则获取一个新数字。

你可以解决这个问题

var usedImages = {};
var usedImagesCount = 0;

function displayImage(){

    var num = Math.floor(Math.random() * (imagesArray.length));
    if (!usedImages[num]){
        document.canvas.src = imagesArray[num];
        usedImages[num] = true;
        usedImagesCount++;
        if (usedImagesCount === imagesArray.length){
            usedImagesCount = 0;
            usedImages = {};
        }
    } else {
        displayImage();
    }
}

Answer 2

你可以试试这段代码。

var images = ["02.jpg","03.jpg","01.jpg"];
    var imagecon = [];
    $(function() {
        $('.change').click(function(e) {
            if(images.length == 0) { // if no image left
                images = imagecon; // put all used image back
                imagecon = []; // empty the container
            }
            var index = Math.floor(Math.random()*images.length);
            var image = images[index];
            imagecon.push(image); // add used image
            images.splice(index,1); // remove it to images
            $('#bg').parent().fadeOut(200, function() {
                $('#bg').attr('src', 'items/'+image);
                $(this).fadeIn(200);
            });
        });
    });

Answer 3

您可以为每个图像添加一个类，如：

image.addClass("viewed")

并编写一个if语句，只有在没有查看该类时才会显示该图像：

if(!image.hasClass(viewed)){
    (show the image methods);
    image.addClass("viewed") 
}

我不打算为你制作所有代码，只需尝试这种方式，学习，失败，成功，玩得开心！：d

Answer 4

根据imgCnt变量尝试此图像更改。

var images = ["01.jpg","02.jpg","03.jpg","01.jpg"];
    var imgCnt=1;
    $(function() {
        $('.change').click(function(e) {
       // var image = images[Math.floor(Math.random()*images.length)];
            if(imgCnt >= images.length){
             imgCnt=0;   
            }
           var image =images[imgCnt];
           // alert(image);
            $('#bg').parent().fadeOut(200, function() {
                $('#bg').attr('src', 'items/'+image); 
                  $(this).fadeIn(200);
                imgCnt++;
            });
        });
    });

Demo

Answer 5

这里有很多方法我只是将访问过的图像的值推入访问数组

Campate两个数组只显示不同的元素

var images = ["02.jpg","03.jpg","01.jpg"];
var visited = [];
$(function() {
    $('.change').click(function(e) {
    var image = images[Math.floor(Math.random()*images.length)];
visited.push(image);
        $('#bg').parent().fadeOut(200, function() {

 y = jQuery.grep(images, function(value) {
if(jQuery.inArray(value, visited) == -1){
     $('#bg').attr('src', 'items/'+image); 

              $(this).fadeIn(200);
  }
});

     }   });
    });
});

我希望得到帮助

点击随机更改图像而不重复

5 个答案: