jQuery меняет фоновое изображение на несколько 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 менять фоновое изображение через случайные промежутки времени, но независимо?


jquery background-image settimeout
person Sam Skirrow    schedule 16.08.2013    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Проверь это:

 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/

person maverickosama92    schedule 16.08.2013
comment
Все эти изображения, похоже, меняются одновременно, и это проблема, с которой я уже столкнулся. - person Sam Skirrow; 16.08.2013
comment
@SamSkirrow: приятель, я обновил свою скрипку и код здесь, проверьте ее демо ... надеюсь, теперь это поможет. спасибо - person maverickosama92; 18.08.2013

arrow_upward
0
arrow_downward

Вам нужно будет зарегистрировать отдельный тайм-аут для каждого 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) ));
}
person Jens Neubauer    schedule 16.08.2013
comment
Привет, спасибо за скрипт, я добавил его в свой JSfiddle, и, похоже, он ничего не сделал. - person Sam Skirrow; 16.08.2013
comment
@Sam: Упс, я немного поторопился со своей случайной функцией :) Попробуйте отредактированную версию. - person Jens Neubauer; 16.08.2013