Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Płynne przejścia między obrazkami
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
Jokeer
Cześć, mam taki kod, który zmienia co jakiś czas logo na mojej stronie. Niestety obrazki zmieniają się bez żadnego przejścia. Jak mogę zmodyfikować ten kod, żeby uzyskać efekt jakiegoś łagodnego przejścia?

  1. <script language="javascript">
  2.  
  3.  
  4. var delay=5000 //set delay in miliseconds
  5.  
  6. var curindex=0
  7.  
  8. var randomimages=new Array()
  9.  
  10. randomimages[0]="images1.jpg"
  11.  
  12. randomimages[1]="images2.jpg"
  13.  
  14. randomimages[2]="images3.jpg"
  15.  
  16. randomimages[3]="images4.jpg"
  17.  
  18. randomimages[4]="images5.jpg"
  19.  
  20. randomimages[5]="images6.jpg"
  21.  
  22. var preload=new Array()
  23.  
  24. for (n=0;n<randomimages.length;n++)
  25.  
  26. {
  27.  
  28. preload[n]=new Image()
  29.  
  30. preload[n].src=randomimages[n] //cycle('fade');
  31.  
  32.  
  33. }
  34.  
  35. document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*(randomimages.length))]
  36. +'">')
  37.  
  38. function rotateimage()
  39.  
  40. {
  41.  
  42. if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length))
  43. )){
  44.  
  45. curindex=curindex==0? 1 : curindex-1
  46.  
  47. }
  48.  
  49. else
  50.  
  51. curindex=tempindex
  52.  
  53. document.images.defaultimage.src=randomimages[curindex]
  54.  
  55. }
  56.  
  57. setInterval("rotateimage()",delay)
  58.  
  59. </script>


Dzięki i pozdrawiam wink.gif
kamil4u
W rzeczywistości wygląda to tak, że masz jeden obrazek nad drugim. Wtedy jeden obrazek ma ustawioną przezroczystość na 100%, a drugi na 0%. W przypadku zmiany co pewien czas( setInterval ) zmieniamy stopień przezroczystości zamieniając odpowiednio wartości procentowe.

Przykład:
http://www.simonbattersby.com/blog/simple-...mage-crossfade/
Jokeer
Dzięki za zainteresowanie i ten przykład, ale niestety jako, że jestem zielony w JS-ie to nie potrafię zastosować go do mojego przykładu...

Mógłby ktoś dodać odpowiednie instrukcję (podejrzewam że coś z fadeOut) do mojego kodu?

Będę bardzo wdzięczny
kamil4u
Zastosuj kod z przykładu( dokładnie to co chcesz ) lub zleć to komuś.

Pozdrawiam

PS. Twój kod jest przestarzały. Nie da się w łatwy sposób go przerobić, trzeba by było napisać całość od nowa. Więc najlepszym wyjście jest zastosowanie kodu z linku smile.gif
Jokeer
Wkleiłem ten kod z przykładu, ale niestety wyświetla mi się tylko pierwszy obrazek
kamil4u
Myślę, że musisz pokazać kod - najlepiej umieszczając stronę na jakimś serwerze smile.gif
IProSoft
Na podstawie Twojego kodu, żebyś złapał "o co biega"
[JAVASCRIPT] pobierz, plaintext
  1. <script type="text/javascript">
  2.  
  3. var delay = 5000;
  4.  
  5. var curindex = 0;
  6.  
  7. var randomimages = [ 'images1.jpg', 'images2.jpg', 'images3.jpg', 'images4.jpg', 'images5.jpg', 'images6.jpg' ];
  8.  
  9. var preload= [];
  10.  
  11. for ( n=1; n<=randomimages.length; n++ )
  12. {
  13. preload[n] = new Image();
  14. preload[n].src = randomimages[n] //cycle('fade');
  15. }
  16.  
  17. document.write('<img name="defaultimage" src="' + randomimages[Math.floor(Math.random()*(randomimages.length))] + '">');
  18.  
  19. function rotateimage()
  20. {
  21. tempindex = Math.floor( Math.random()*(randomimages.length) );
  22. if( curindex == tempindex )
  23. {
  24. return rotateimage();
  25. }
  26.  
  27. curindex = tempindex;
  28.  
  29. $(document.images.defaultimage).fadeOut( 'fast', function(){
  30. document.images.defaultimage.src = randomimages[curindex];
  31. $(document.images.defaultimage).fadeIn();
  32. });
  33.  
  34. }
  35.  
  36. setInterval( "rotateimage()", delay );
  37.  
  38. </script>
[JAVASCRIPT] pobierz, plaintext


Żeby zadziałało potrzebujesz jQuery czyli w heade strony umieść:
  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
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.