Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][CSS][HTML]Płynne zmienianie tła diva
Forum PHP.pl > Forum > Przedszkole
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

  1. <script type="text/javascript">
  2. window.addEventListener('load', function () {
  3. var foto = document.getElementById("foto");
  4. var bg = ['url(img/image1.jpg)', 'url(img/image2.jpg)', 'url(img/image3.jpg)', 'url(img/image4.jpg)'];
  5. var czas = 5; // 5 sekund
  6. var transition = 500;
  7.  
  8. var i = 0;
  9. setInterval(function () {
  10. i++;
  11. i%=bg.length;
  12.  
  13. foto.style.backgroundImage = bg[i];
  14. }, czas * 1000);
  15. }, false);
  16.  


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

Będę wdzięczny za pomoc. Pozdrawiam
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 ? wink.gif

A tak na początek to sobie poczytaj o czymś takim jak new Image() wink.gif
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:
  1. img = new Image();
  2.  
  3. img.onload = function(){
  4. // image has been loaded
  5. };
  6.  
  7. img.src = image_url;
Poczatkujacy_Web
Cytat(nowakjaro2 @ 20.02.2014, 09:26:57 ) *
ogarnij sobie coś takiego:
  1. img = new Image();
  2.  
  3. img.onload = function(){
  4. // image has been loaded
  5. };
  6.  
  7. img.src = image_url;


możesz mi powiedzieć w jakim celu?

Czy do tamtego kodu nie da się zastosować tego transition?
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.