Forum PHP.pl > zamiana obrazka na kolejny w pętli

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: zamiana obrazka na kolejny w pętli

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

byker

23.01.2013, 12:45:47

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 
java script:
for(n=1; n<5; +n)
{
$('#r'+n).click(function(){
$(this).fadeOut('slow');
});
n=1++;
$('#r'+n).show();
};
 
html:
<div id="obrazki">
<div id="r1">
</div>
<div id="r2">
</div>
<div id="r3">
</div>
<div id="r4">
</div>
<div id="r5">
</div>
</div>
 
css:
#r1{position: absolute;}
#r2,#r3,r4,#r5{
position: absolute;
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.

lukasz_os

23.01.2013, 12:57:35

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.

fizzlebubble

23.01.2013, 14:12:23

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

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

byker

24.01.2013, 09:07:50

ok, dzięki za naprowadzenie. Spróbuję coś wymyślić.

lukasz_os

24.01.2013, 09:10:59

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 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Test</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script>
 
            $().ready(function(){
                $('#obrazki').children().first().show();
                var number = $('#obrazki').children().length;
                $('#obrazki>img').click(function(){
                    var index=$(this).index()+1;
                    $(this).hide();
                    if(index==number){
                        $('#obrazki').children().first().show();
                    } else {
                        $(this).next().show();
                    }
                });
            });
 
        </script>
        <style>
            #obrazki img {
                display: none;
                position: absolute;
            }
 
        </style>
    </head>
    <body>
        <div id="obrazki">
            <img src="1.jpg" />
            <img src="2.jpg" />
            <img src="3.jpg" />
            <img src="4.jpg" />
            <img src="5.jpg" />
        </div>
    </body>
</html>
[HTML] pobierz, plaintext

byker

24.01.2013, 11:00:10

Bardzo Ci kolego dziękuję. Rozwiązanie podane na tacy.

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.