Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> zamiana obrazka na kolejny w pętli
byker
post 23.01.2013, 12:45:47
Post #1





Grupa: Zarejestrowani
Postów: 9
Pomógł: 0
Dołączył: 23.01.2013

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

Witam wszystkich forumowiczów!
Chciałbym na stronie stworzyć galerię obrazków: widoczna jest jest pierwsza grafika, po kliknięciu w jej miejsce pojawia się następna.
Stworzyłem taki kod:

[HTML] pobierz, plaintext 
  1. java script:
  2. for(n=1; n<5; +n)
  3. {
  4. $('#r'+n).click(function(){
  5. $(this).fadeOut('slow');
  6. });
  7. n=1++;
  8. $('#r'+n).show();
  9. };
  10.  
  11. html:
  12. <div id="obrazki">
  13. <div id="r1">
  14. </div>
  15. <div id="r2">
  16. </div>
  17. <div id="r3">
  18. </div>
  19. <div id="r4">
  20. </div>
  21. <div id="r5">
  22. </div>
  23. </div>
  24.  
  25. css:
  26. #r1{position: absolute;}
  27. #r2,#r3,r4,#r5{
  28. position: absolute;
  29. display: none}
[HTML] pobierz, plaintext


Wszystko działa tylko jak dojdę do ostatniego obrazka, chcialbym aby pojawił się pierwszy (r1). Czy mógłbym prosić o pomoc jak to zrobić? Dodawałem do pętli while(n==6){n=1}, ale nie działa.
Pozdrawiam wszystkich.

Ten post edytował byker 23.01.2013, 12:46:36
Go to the top of the page
+Quote Post
lukasz_os
post 23.01.2013, 12:57:35
Post #2





Grupa: Zarejestrowani
Postów: 203
Pomógł: 55
Dołączył: 23.11.2008
Skąd: UKF

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

Po 1 while nie służy do sprawdzenia warunku.
Po 2 nie potrzebny for w JS.
Po 3 nie nadawaj divom z obrazkami oddzielnych id. ID nie do tego służy - poczytaj głębiej o css.
Po 4 skoro już używasz JQuery to zainteresuj się funkcjami jak children, eq, next, prev, first.


--------------------
Pomagam jeśli mam czas oraz jak się na tym znam :D
Go to the top of the page
+Quote Post
fizzlebubble
post 23.01.2013, 14:12:23
Post #3





Grupa: Zarejestrowani
Postów: 272
Pomógł: 28
Dołączył: 13.02.2011

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

Proszę: http://jsbin.com/ewihep/1/edit

Ogólnie na divach się tego nie robi, tylko na ul > li smile.gif.

Ten post edytował fizzlebubble 23.01.2013, 14:19:09


--------------------
Nie obrażę się, jeśli za udzieloną pomoc odwdzięczysz się klikając w "Pomógł" :).
Go to the top of the page
+Quote Post
byker
post 24.01.2013, 09:07:50
Post #4





Grupa: Zarejestrowani
Postów: 9
Pomógł: 0
Dołączył: 23.01.2013

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

ok, dzięki za naprowadzenie. Spróbuję coś wymyślić.
Go to the top of the page
+Quote Post
lukasz_os
post 24.01.2013, 09:10:59
Post #5





Grupa: Zarejestrowani
Postów: 203
Pomógł: 55
Dołączył: 23.11.2008
Skąd: UKF

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

Tak mi się wczoraj nudziło tu masz wersję bez zbędnych ID czy głupich pętli w jsie. Do tego nie jest w żaden sposób uzależniony od ilości obrazków w danym divie.

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  5.         <title>Test</title>
  6.         <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  7.         <script>
  8.  
  9.             $().ready(function(){
  10.                 $('#obrazki').children().first().show();
  11.                 var number = $('#obrazki').children().length;
  12.                 $('#obrazki>img').click(function(){
  13.                     var index=$(this).index()+1;
  14.                     $(this).hide();
  15.                     if(index==number){
  16.                         $('#obrazki').children().first().show();
  17.                     } else {
  18.                         $(this).next().show();
  19.                     }
  20.                 });
  21.             });
  22.  
  23.         </script>
  24.         <style>
  25.             #obrazki img {
  26.                 display: none;
  27.                 position: absolute;
  28.             }
  29.  
  30.         </style>
  31.     </head>
  32.     <body>
  33.         <div id="obrazki">
  34.             <img src="1.jpg" />
  35.             <img src="2.jpg" />
  36.             <img src="3.jpg" />
  37.             <img src="4.jpg" />
  38.             <img src="5.jpg" />
  39.         </div>
  40.     </body>
  41. </html>
[HTML] pobierz, plaintext


--------------------
Pomagam jeśli mam czas oraz jak się na tym znam :D
Go to the top of the page
+Quote Post
byker
post 24.01.2013, 11:00:10
Post #6





Grupa: Zarejestrowani
Postów: 9
Pomógł: 0
Dołączył: 23.01.2013

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

Bardzo Ci kolego dziękuję. Rozwiązanie podane na tacy.
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · Następny nowszy »
 

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

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 18.04.2024 - 16:32
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn