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