jQuery change background image to several divs at random intervals

问题

I have several divs displayed next to each other on my site, each with a different background image. I have created a script that changes the background images at a random time interval, However, the script changes all the images at the same time....I want each one to change randomly, totally independent of the other....I'd also like them to fade, but the timing is the key question here.

Here is my script I'm working with.

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

also see my JSFiddle http://jsfiddle.net/QwJfn/2/

How can I get each div to change background image at random time intervals but independently?

回答1:

Check this:

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

Working fiddle here: http://jsfiddle.net/QwJfn/10/

回答2:

You would need to register a separate timeout for each div.

Alternatively, you could choose a random div to change each time and reduce the timeout factor so the function runs more often:

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

来源：https://stackoverflow.com/questions/18269784/jquery-change-background-image-to-several-divs-at-random-intervals

标签

jquery

background-image

settimeout