jQuery 以随机间隔将背景图像更改为多个 div

Question

我的网站上有几个相邻显示的 div，每个 div 都有不同的背景图像。我创建了一个以随机时间间隔更改背景图像的脚本，但是，该脚本同时更改所有图像....我希望每个图像随机更改，完全独立于其他图像....我我也希望它们消失，但时机是这里的关键问题。

这是我正在使用的脚本。

jQuery(window).load(function(){
    var images = ['images/gallery/gallery2thumb.jpg','images/gallery/gallery3thumb.jpg','images/gallery/gallery4thumb.jpg','images/gallery/gallery5thumb.jpg','images/gallery/gallery6thumb.jpg','images/gallery/gallery7thumb.jpg','images/gallery/gallery8thumb.jpg','images/gallery/gallery9thumb.jpg',];
    var i = 0;
    var timeoutVar;

    function changeBackground() {
        clearTimeout(timeoutVar); // just to be sure it will run only once at a time

        jQuery('.hexagon-in2.change').css('background-image', function() {
            if (i >= images.length) {
                i=0;
            }
            return 'url(' + images[i++] + ')';      
        });

        timeoutVar = setTimeout(changeBackground, ( 300+Math.floor(Math.random() * 1700) ));
    }

    changeBackground();        
});

另请参阅我的 JSFiddle http://jsfiddle.net/QwJfn/2/

如何让每个 div 以随机时间间隔但独立地更改背景图像？

Answer 1

检查一下:

 var images = ['http://www.placekitten.com/250/300','http://www.placekitten.com/260/300','http://www.placekitten.com/260/310'];
 var i = 0;
 var allDivs = [];

 function changeBackground() {
     allDivs = $(".hexagon-in2").each(function(){       
        setBG($(this),1000);
  });      
 }

 function setBG(div, time){
    var timeVar;
    clearTimeout(timeVar);

    if( div == undefined){
       return;   
    }

    div.css('background-image', function() {
       if (i >= images.length) {
           i=0;
       }
      return 'url(' + images[i++] + ')';      
   });

   timeVar = setTimeout(setTimer, time);    
  }

 function getRandomInt (min, max) {
   return Math.floor(Math.random() * (max - min + 1)) + min;
 }

 function setTimer(){
   var imageIndex = getRandomInt(0,allDivs.length);
   setBG($(allDivs[imageIndex]),3000);  
 }

 $(function(){          
    changeBackground();        
 });

在这里工作 fiddle :http://jsfiddle.net/QwJfn/10/