我的网站上同时显示几个div,每个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/

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

最佳答案

检查一下:

 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/

10-07 19:40
查看更多