2

我的网站上有几个 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 以随机时间间隔但独立地更改背景图像？

4

2 回答 2

2

检查这个：

 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/

于 2013-08-16T09:24:57.370 回答
0

您需要为每个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) ));
}
于 2013-08-16T09:18:49.207 回答