Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [JavaScript]Automatyczne przewijanie
sliwa007
post
Post #1





Grupa: Zarejestrowani
Postów: 69
Pomógł: 7
Dołączył: 18.08.2010
Skąd: Rzeszów

Ostrzeżenie: (10%)
X----


Witam,
Chcę zrobić bardzo prosty slider z wykorzystaniem jquery. Zrobiłem coś takiego

  1. <button id="prev" href="">prev</button> <button id="next" href="">next</button><br>
  2. <img class="zdj" src="1.jpg"><img class="zdj" src="2.gif">
  3. $('#prev').click(function() {
  4. $('img.zdj').animate({"left": "+=100px"}, "slow");
  5. });
  6. $('#next').click(function() {
  7. $('img.zdj').animate({"left": "-=100px"}, "slow");
  8. });


Powyższy kod działa po kliknięciu w odpowiednie przyciski ale, problem polega na tym że nie wiem co zrobić żeby zdjęcia przesuwały się automatycznie przez cały czas. Z góry dziękuję za pomoc
Go to the top of the page
+Quote Post
vokiel
post
Post #2





Grupa: Zarejestrowani
Postów: 2 592
Pomógł: 445
Dołączył: 12.03.2007

Ostrzeżenie: (0%)
-----


Jest taka funkcja w java script: setTimeout
Go to the top of the page
+Quote Post
kamil4u
post
Post #3





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

Ostrzeżenie: (0%)
-----


Akurat w tym przypadku setInterval (IMG:style_emoticons/default/wink.gif) - https://developer.mozilla.org/pl/DOM/window.setInterval
Go to the top of the page
+Quote Post
vokiel
post
Post #4





Grupa: Zarejestrowani
Postów: 2 592
Pomógł: 445
Dołączył: 12.03.2007

Ostrzeżenie: (0%)
-----


Można użyć setInterval, można też setTimeout...
[JAVASCRIPT] pobierz, plaintext
  1. function sliderStep(){
  2. // bla bla
  3. setTimeout('sliderStep()',1000);
  4. }
  5. setTimeout('sliderStep()',1000);
[JAVASCRIPT] pobierz, plaintext


Przy setTimeout jest jeden plus, wiemy, że jedna iteracja nie będzie zachodziła na drugą. Ma to znaczenie przy animacjach, w których nie do końca wiadomo ile czasu zajmie ich wykonanie.
Go to the top of the page
+Quote Post
sliwa007
post
Post #5





Grupa: Zarejestrowani
Postów: 69
Pomógł: 7
Dołączył: 18.08.2010
Skąd: Rzeszów

Ostrzeżenie: (10%)
X----


dzięki wszystko działa ładnie. Tylko teraz mam kolejny problem aby po 5 takich ruchach animacja wracała do pierwszej pozycji. Jakiej funkcji użyć aby coś takiego zrobić ?
Go to the top of the page
+Quote Post
vokiel
post
Post #6





Grupa: Zarejestrowani
Postów: 2 592
Pomógł: 445
Dołączył: 12.03.2007

Ostrzeżenie: (0%)
-----


If (IMG:style_emoticons/default/smile.gif)
Zrób sobie licznik iteracji, nawet globalną zmienną, w pętli zwiększaj, no i oczywiście na początku sprawdzaj jej wartość. Jeśli osiągnie pułap, to resetuj wszystko do stanu początkowego.
Go to the top of the page
+Quote Post
sliwa007
post
Post #7





Grupa: Zarejestrowani
Postów: 69
Pomógł: 7
Dołączył: 18.08.2010
Skąd: Rzeszów

Ostrzeżenie: (10%)
X----


a czy mógłbyś podać jakiś podobny kod. Bo w życiu czegoś takiego nie widziałem i nawet nie wiem od czego zacząć.
Go to the top of the page
+Quote Post
vokiel
post
Post #8





Grupa: Zarejestrowani
Postów: 2 592
Pomógł: 445
Dołączył: 12.03.2007

Ostrzeżenie: (0%)
-----


To na prawdę takie trudne?
[JAVASCRIPT] pobierz, plaintext
  1. var i=0;
  2. function sliderStep(){
  3. if ( i < 5 ){
  4. // bla bla, działanie slider'a
  5. i++;
  6. }else{
  7. i=0;
  8. // reset slider'a do pozycji startowej
  9. }
  10. setTimeout('sliderStep()',1000);
  11. }
  12. setTimeout('sliderStep()',1000);
[JAVASCRIPT] pobierz, plaintext
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 24.08.2025 - 05:18