[JavaScript][CSS][HTML]Płynne zmienianie tła diva Opcje

[Poczatkujacy_Web]

Witam,

Mam kod js, który zmienia mi tło diva o nazwie "foto", lecz robi to bez żadnego przejścia, oraz startuje bez żadnego tła,

chciałbym aby było jakieś delikatne przejście oraz aby tło startowało od pierszego zdjęcia.

niestety nie potrafię sam odpowiednio przerobić tego kodu

[HTML] pobierz, plaintext 
		<script type="text/javascript">
		window.addEventListener('load', function () {
var foto = document.getElementById("foto");
var bg = ['url(img/image1.jpg)', 'url(img/image2.jpg)', 'url(img/image3.jpg)', 'url(img/image4.jpg)'];
var czas = 5; // 5 sekund
var transition = 500;
 
var i = 0;
setInterval(function () {
i++;
i%=bg.length;
 
foto.style.backgroundImage = bg[i];
}, czas * 1000);
}, false);
</script>
 
[HTML] pobierz, plaintext 

Dodałem var transition = 500; ale co dalej?

Będę wdzięczny za pomoc. Pozdrawiam

Ten post edytował Poczatkujacy_Web 20.02.2014, 02:11:01

[owca_82]

Jak ma robić jakieś "przejście" skoro żadnego nie "zaimplementowałeś", a zwyczajnie podmieniasz tło - samo się nie zrobi (chyba że skorzystasz z jakiegoś gotowca).

.... aby tło startowało od pierwszego zdjęcia ... - i++ na koniec funkcji ?

A tak na początek to sobie poczytaj o czymś takim jak new Image()

Ten post edytował owca_82 20.02.2014, 01:40:53

[Poczatkujacy_Web]

witaj,

czy pomożesz mi jakoś z implementacją jakiegoś przejścia? nie mam pojęcia o tym a chciałbym się tego nauczyć.

Dodałem var transition = 500; ale co dalej?

jak tego użyć w tym kodzie?

[nowakjaro2]

ogarnij sobie coś takiego:

[HTML] pobierz, plaintext 
img = new Image();
 
img.onload = function(){
  // image  has been loaded
};
 
img.src = image_url;
[HTML] pobierz, plaintext 

[Poczatkujacy_Web]

ogarnij sobie coś takiego:

[HTML] pobierz, plaintext 
img = new Image();
 
img.onload = function(){
  // image  has been loaded
};
 
img.src = image_url;
[HTML] pobierz, plaintext 

możesz mi powiedzieć w jakim celu?

Czy do tamtego kodu nie da się zastosować tego transition?