Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][JavaScript] Problem z mini-psuedo-sliderem
Forum PHP.pl > Forum > Przedszkole
Twist
Hej, Uczę się JS'a i w celach edukacyjnych napisałem coś takiego:

  1. <script type="text/javascript">
  2. <!--
  3.  
  4. window.addEventListener("load",Laduj,false);
  5. var UchwycSlider;
  6. var stan = 1000;
  7. function Laduj()
  8. {
  9. var UchwytLewy = document.getElementById('aprev');
  10. UchwytLewy.addEventListener("mouseover",PrzewinWLewo,false);
  11. }
  12. function PrzewinWLewo()
  13. {
  14.  
  15. UchwycSlider = document.getElementById('sliderPhotoRow');
  16. stan=10;
  17. setInterval(Przesuniecie(),100);
  18. }
  19. function Przesuniecie()
  20. {
  21.  
  22.  
  23. UchwycSlider.style.left = (++stan +"px");
  24. stan=stan++;
  25.  
  26. }
  27.  
  28. -->
  29. </script


Problem jest takie, że Przesuniecie() wykonuje sie tylko raz i zmienia CSS: left:11px a chcialbym, zeby Przesuniecie() wykonywalo sie cyklicznie (czyli co 100ms zmieniala "left" na starawartosc+1px)
Prosze o pomoc

EDIT: Wiem, ze "stan" proboje zwiekszac w roznyhc miejsach, ale i tka zadne nie dziala tak, jak sie spodziewalem.
kamil4u
Źle wywołujesz: setInterval(Przesuniecie(),100);
Powinno być: setInterval(Przesuniecie,100);
https://developer.mozilla.org/pl/DOM/window.setInterval

Jeżeli nadal nie zadziała umieść HTML i daj przykład na żywo - np. tu: http://www.jsfiddle.net/

Dam Ci więcej wskazówek, jeżeli dasz cały kod smile.gif
Twist
Wielkie dzięki!
Chodziło o wywołanie funkcji, tak jak pisałeś. Teraz działa dokładnie tak jak chciałem!
kamil4u
Nadal proponuje, żebyś umieścił cały kod(z HTML itd.) - może znajdę parę "niedociągnięć", które warto, żebyś zapamiętał.
Twist
Generalnie - dopiero sie uczę i próbuje stworzyć coś a kształt slidera - jak tylko go skoncze - wstawie tutaj kod bądź link do kodu i posłucham opinii bardziej doświadczonych chłopaków smile.gif

Wersja ALPHA:
http://starodaj.securityhost.pl/slider/
  1.  
  2. <script type="text/javascript">
  3. <!--
  4.  
  5. window.addEventListener("load",Laduj,false);
  6. var UchwycSlider;
  7. var stan = 1;
  8. var stanRight = 1000;
  9. var stop ="nie";
  10. function Laduj()
  11. {
  12. var UchwytLewy = document.getElementById('aprev');
  13. var UchwytPrawy = document.getElementById('anext');
  14. UchwytLewy.addEventListener("mouseover",PrzewinWLewo,false);
  15. UchwytLewy.addEventListener("mouseout",Stop,false);
  16.  
  17.  
  18. UchwytPrawy.addEventListener("mouseover",PrzewinWPrawo,false);
  19. UchwytPrawy.addEventListener("mouseout",Stop1,false);
  20.  
  21. }
  22. function PrzewinWLewo()
  23. {
  24. stop="nie";
  25. UchwycSlider = document.getElementById('sliderPhotoRow');
  26.  
  27. setInterval(Przesuniecie,20);
  28.  
  29. }
  30. function Stop()
  31. {
  32. stop="tak";
  33. }
  34. function Stop1()
  35. {
  36. stop1="tak";
  37. }
  38.  
  39. function Przesuniecie()
  40. {
  41. if (stop == "nie")
  42. {
  43. UchwycSlider.style.left = (stan-- +"px");
  44. }
  45. }
  46. function PrzewinWPrawo()
  47. {
  48. stop1="nie";
  49. UchwycSlider = document.getElementById('sliderPhotoRow');
  50. setInterval(PrzesunieciePrawe,20);
  51. }
  52. function PrzesunieciePrawe()
  53. {
  54.  
  55. if (stop1 == "nie"){
  56. UchwycSlider.style.left = (++stan +"px");
  57.  
  58.  
  59. }
  60. }
  61.  
  62. -->
  63. </script


Niepożadany efekt - jak najedziemy kilkakrotnie na czerwona strzalke to przewija sie 2x szybciej i tak w kółko... Jak sie tego pozbyc?
kamil4u
1. Zamiast zmiennych tak,nie używaj true(tak)/false(nie)
2. Zrób jedną funkcję do przesuwania i jedną do zatrzymywania - a nie wszystko osobno
3. Zauważ, że większość kodu Ci się powtarza - warto tworzyć funkcje z argumentem, które znacznie skrócą kod.
4. Poczytaj o clearInterval
Twist
Dzięki za rady, pierwsze 3 wydaja sie jasne i zrozumiałem.
Co do 4 - jak poznać ID, ktore mam podac w clearInterval?
kamil4u
Zrób to trochę inaczej:
Kod
mouseover -> test = setInterval(....);
mouseout -> clearInterval( test );

i wtedy bez zmiennej "stop".

lub

Kod
mouseover -> stop = false; test = setInterval( funkcja );
funkcja -> if( stop ) clearInterval( test ); else ....
mouseout ->stop = true;

Twist
troche mi wstyd pytać, ale co oznacza ta strzałeczka?
kamil4u
Nic nie oznacza - to miał być skrót myślowy smile.gif

np.
Kod
UchwytLewy.addEventListener("mouseover",PrzewinWLewo,false);

=
Kod
mouseover -> to co powinno znaleźć się w funkcji PrzewinWLewo
Twist
Tak też myślałem, ale wolałem się upewnić. Wychodzę z założenia "nie jest wstydem pytać, wstyd to nie wiedzieć".
Jutro przerobię skrypt wg. wskazówek i wstawię tutaj
Dzięki jeszcze raz
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.