[CSS][JavaScript] Problem z mini-psuedo-sliderem, setInterval i CSS Opcje

[Twist]

Hej, Uczę się JS'a i w celach edukacyjnych napisałem coś takiego:

[PHP] pobierz, plaintext 
<script type="text/javascript">
    <!--
 
      window.addEventListener("load",Laduj,false);
      var UchwycSlider;
      var stan = 1000;
      function Laduj()
      {
       var UchwytLewy = document.getElementById('aprev'); 
       UchwytLewy.addEventListener("mouseover",PrzewinWLewo,false);      
      }
      function PrzewinWLewo()
      {  
 
       UchwycSlider = document.getElementById('sliderPhotoRow');  
       stan=10;  
       setInterval(Przesuniecie(),100);
      }
      function Przesuniecie()
      {
 
 
      UchwycSlider.style.left = (++stan +"px"); 
      stan=stan++;
 
      }
 
    -->
    </script
[PHP] pobierz, plaintext 

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.

Ten post edytował Twist 4.09.2011, 18:56:01

[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

[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

Wersja ALPHA:
http://starodaj.securityhost.pl/slider/

[PHP] pobierz, plaintext 
 
    <script type="text/javascript">
    <!--
 
      window.addEventListener("load",Laduj,false);
      var UchwycSlider;
      var stan = 1;
      var stanRight = 1000;
      var stop ="nie";
      function Laduj()
      {
       var UchwytLewy = document.getElementById('aprev'); 
       var UchwytPrawy = document.getElementById('anext');
       UchwytLewy.addEventListener("mouseover",PrzewinWLewo,false);
         UchwytLewy.addEventListener("mouseout",Stop,false);
 
 
       UchwytPrawy.addEventListener("mouseover",PrzewinWPrawo,false);
        UchwytPrawy.addEventListener("mouseout",Stop1,false);  
 
      }
      function PrzewinWLewo()
      {  
       stop="nie";
       UchwycSlider = document.getElementById('sliderPhotoRow');  
 
       setInterval(Przesuniecie,20);
 
      }
       function Stop()
      {  
            stop="tak";
      }
      function Stop1()
      {  
            stop1="tak";
      }
 
      function Przesuniecie()
      {
                if (stop == "nie")
       { 
          UchwycSlider.style.left = (stan-- +"px"); 
       }      
      }
      function PrzewinWPrawo()
      {  
       stop1="nie";
       UchwycSlider = document.getElementById('sliderPhotoRow');  
       setInterval(PrzesunieciePrawe,20);     
      }
      function PrzesunieciePrawe()
      {
 
        if (stop1 == "nie"){
      UchwycSlider.style.left = (++stan +"px"); 
 
 
         }
      }
 
    -->
    </script
[PHP] pobierz, plaintext 

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

np.

Kod

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

=

Kod

mouseover -> to co powinno znaleźć się w funkcji PrzewinWLewo

Ten post edytował kamil4u 4.09.2011, 21:45:02

[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