Question

我创建了一个图像网格（主要使用bootstrap），在该网格中有3行5个图像。我希望他们能够随时加载一次，但在所有图像都被使用之前不会重复。我此时有32个图像阵列。

我使用当前代码（http://codepen.io/msbtterswrth/pen/MyZXZQ?editors=0010）创建了一个简化的测试用例，其中包含一些注意事项。你会注意到它们发射之后它们都会转到同一个图像（不知道为什么），但是如果你改变了下面的行，它会有效，但会经常重复。

更改此

var random_no = Math.floor(Math.random()*total_images)+1

以

var random_no = Math.floor(Math.random()*32)+1

我对javascript / jquery并不十分擅长并且花了最近两天尝试了我遇到过的各种各样的事情，但这是我能够完成的最接近的解决方案。

编辑：我放弃了。我现在正在使用这个和一些js确定标题。 http://tympanus.net/Development/AnimatedResponsiveImageGrid/index2.html

仍然对答案感兴趣，以备将来参考。

Answer 1

您可以使用此版本测试我检测到的问题是有时this对象重复并且它会更改同一图像的src ...

setInterval(function () {
    var $flippers = $("section.culture img"),
    qtFlippers = $flippers.length;

    $flippers.eq(Math.floor(Math.random()*qtFlippers)).randomize({
        path : 'http://centretek-drupal.centreteksolutions.net/sites/default/files/images/culture-'
    });
}, 500);


/*jQuery RANDOMIZER*/
(function($){

  $.fn.randomize = function(options){

    var new_src,
    settings = $.extend({
                path : 'http://centretek-drupal.centreteksolutions.net/sites/default/files/images/culture-'
            }, options);
    count = 0,
    src_storage = [];

    /*this.each(function(){
        total_images = get_prop($(this));
    });*/


      return this.each(function(){
    new_src = generate_src();
    //console.log($("img")[1].src);
    for(i=0; i<$("img").length; i++){
        if($("img")[i].src == new_src){
        //if(document.getElementsByTagName("img")[i].getAttribute("src") == new_src){  
           new_src = generate_src();
          i = 0;
        } 
    }
    this.setAttribute("src",new_src);
});

    // function to check for images that maybe repeated .
    /*function get_prop(current){
        var current_src = current.attr('src');
        if ($.inArray(current_src , src_storage) === -1) {
            src_storage.push(current_src);
        }
        return src_storage.length;
    }*/

    //function to generate a random number
    function generate_random(){
        var random_no = Math.floor(Math.random()*32)+1
        return random_no;
    };

    // function to generate a new src for the selected images
    function generate_src(){
        var store_random = generate_random(),
            new_src;
        if (store_random >= 10) {
            new_src =  'http://centretek-drupal.centreteksolutions.net/sites/default/files/images/culture-'  + store_random + '.jpg';
        } else{
            new_src = settings.path + store_random + '.jpg';
        }
        return new_src;
    }
  }

}(jQuery));

随机图像网格问题

1 个答案: