使用阵列中的图像填充多个div而不重复

Question

我有一个包含15个div元素的页面。我需要用至少36张图像的数组中的随机图像填充每个div。然后我需要让图像以随机间隔旋转。我有这部分工作与Choose image URL from large array, insert into random DIV on page, cycle提供的解决方案。

我想改进代码，以便图像不被允许从数组中调用，如果它们已经显示在页面上。这就是我所坚持的。

这是我的代码到目前为止。

function random_int(max) { 
      return Math.floor(Math.random() * max); 
     } 

     $(document).ready(function() { 
      var images = ['http://placekitten.com/159/159', 'http://placekitten.com/160/160', 'http://placekitten.com/161/161', 'http://placekitten.com/162/162', 'http://placekitten.com/163/163', 'http://placekitten.com/164/164', 'http://placekitten.com/165/165', 'http://placekitten.com/166/166', 'http://placekitten.com/167/167', 'http://placekitten.com/168/168', 'http://placekitten.com/169/169', 'http://placekitten.com/170/170', 'http://placekitten.com/171/171', 'http://placekitten.com/172/172', 'http://placekitten.com/173/173', 'http://placekitten.com/174/174', 'http://placekitten.com/175/175', 'http://placekitten.com/176/176', 'http://placekitten.com/177/177', 'http://placekitten.com/178/178', 'http://placekitten.com/179/179']; 
      var $divs = $('div.projectItem'); 

      $divs.each(function() { 
       $('<img width="100%" />', { 
        src: 'http://placekitten.com/180/180', 
        alt: this.id 
       }).appendTo(this); 
      }); 

      function switchImage() { 
       var $div = $divs.eq(random_int($divs.length)); 
       var image = images[random_int(images.length)]; 

       $div.find('img').attr('src', image); 
      } 

      var imageChanger = setInterval(switchImage, 500); 
     }); 

I have created a JSfiddle example。

我想实现的另一件事是在页面首次加载时在每个div中都有一个图像。你会注意到在jsfiddle的例子中divs是空的，并且可以在页面加载后保持这种状态一段时间。我曾尝试在每个div中包含一个初始img标签，但是当随机图像加载时，它们不会替换初始图像，每个div最后都会包含两个图像。我相信这是因为.appendTo(this);。我认为我必须将其更改为replaceChild或类似的？

任何协助赞赏的第一次海报和JS初学者。

Answer 1

每次添加时，只需从阵列中删除图像。
一旦您替换图像，不要忘记将图像从IMG标签推入阵列。

事情是这样的：

function random_int(max) { 
    return Math.floor(Math.random() * max); 
} 

$(document).ready(function() { 
    var images = ['http://placekitten.com/159/159', 'http://placekitten.com/160/160', 'http://placekitten.com/161/161', 'http://placekitten.com/162/162', 'http://placekitten.com/163/163', 'http://placekitten.com/164/164', 'http://placekitten.com/165/165', 'http://placekitten.com/166/166', 'http://placekitten.com/167/167', 'http://placekitten.com/168/168', 'http://placekitten.com/169/169', 'http://placekitten.com/170/170', 'http://placekitten.com/171/171', 'http://placekitten.com/172/172', 'http://placekitten.com/173/173', 'http://placekitten.com/174/174', 'http://placekitten.com/175/175', 'http://placekitten.com/176/176', 'http://placekitten.com/177/177', 'http://placekitten.com/178/178', 'http://placekitten.com/179/179']; 
    var $divs = $('div.projectItem'); 

    $divs.each(function() { 
     $('<img width="100%" />', { 
      src: 'http://placekitten.com/180/180', 
      alt: this.id 
     }).appendTo(this); 
    }); 

    function switchImage() { 
     var $div = $divs.eq(random_int($divs.length)); 
     var image_i = random_int(images.length); 
     var image = images[image_i]; 
     var $img = $div.find('img'); 

     images.splice(images_i,1); 
     images.push($img.attr("src")); 

     $img.attr('src', image); 
    } 

    var imageChanger = setInterval(switchImage, 500); 
}); 

好运。