jQuery隨機更改背景圖像到幾個div

Question

我有幾個div在我的網站上彼此相鄰顯示，每個都有不同的背景圖像。我創建了一個腳本，以隨機時間間隔更改背景圖像，但腳本同時更改所有圖像....我希望每個人隨機更改，完全獨立於另一個.... I '也喜歡他們消失，但時機是關鍵問題在這裏。

這是我正在使用的腳本。

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/

我怎樣才能得到每個格在隨機的時間間隔改變背景圖片，但獨立？

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

在這裏工作小提琴：http://jsfiddle.net/QwJfn/10/

Answer 2

您需要爲每個div註冊單獨的超時值。

或者，你可以選擇一個隨機div每次改變和減少超時因素，因此函數運行更加頻繁：

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

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

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