JavaScript: funkcja zmieniająca tło DIV`a

Piątek, 26.07.2013

Jednym ze sposobów urozmaicenia strony jest wprowadzenie na niej ruchomych elementów. Na przykład zmieniających się zdjęć. Napiszemy funkcję, która co pewien określony czas będzie zmieniała tło (backgroundImage) elementu, w tym przypadku DIV`a.

Na początek musimy przygotować kilka zdjęć będących tłami. Nazwijmy je foto1.jpg, foto2.jpg, foto3.jpg, foto4.jpg. Trzeba też nadać naszemu elementowi id, np: foto. Kod HTML będzie wyglądał tak: <div id="foto"></div> Teraz funkcja JavaScript:


window.addEventListener('load', function () {

 	 var foto = document.getElementById("foto");

	 var bg = ['url(foto1.jpg)', 'url(foto2.jpg)', 'url(foto3.jpg)', 'url(foto4.jpg)'];

    var czas = 5; // 5 sekund



    var i = 0;

    setInterval(function () {

        i++;

        i%=bg.length;



        foto.style.backgroundImage = bg[i];

    }, czas * 1000);

}, false);

Funkcja ta tworzy zdarzenie wywoływane po załadowaniu strony. Następnie pobieramy element, który ma id="foto" oraz definiujemy tablicę teł i czas ich zmiany. Funkcja setInterval ustawia opóźnienie do cyklicznego wywołania funkcji - w tym przypadku oznacza to, że tło będzie zmieniane co 5 sekund. Na koniec pobieramy kolejno elementy tabeli bg i ustawiamy je jako tło (backgroundImage) pobranego wcześniej elementu.