Posted by & filed under Javascript, Jquery, PHP, Programmazione, Web 2.0, Web Design.

DMCA.com
Web Developing 1294663528

In questo video tutorial vi farò vedere come realizzare un semplice slide show in jquery.

Oltre al video HD che trovate, come al solito, dopo il salto, oggi vi lascio anche il codice sorgente e un live demo.

Ecco il codice html del file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <title>Semplice SlideShow in jquery</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

    </head>
    <body>


    <div id="pippo">




        <img src="img/3_img.jpg" alt="IMG" class="3"style="display:none;"/>

        <img src="img/5_img.jpg" alt="IMG" class="5"style="display:none;"/>


    </div>


    </body>
    </html>

Ed ecco il codice javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
$(document).ready(function(){

            var attuale=1;

           $('#pippo img').bind('click' , slide);

            function slide(){

                var selettore='.'+attuale;

                var successivo=attuale+1;

                var selettore2='.'+successivo;

                if(attuale>4){

                    $(selettore).fadeOut(500, function(){ $('.1').fadeIn(500); })

                    attuale=1;

                }

                else{
                    //selettore=".1" ----- selettore2=".2"
                    $(selettore).fadeOut(500 , function(){ $(selettore2).fadeIn(500); })

                    attuale++;

                }

            }


        });
  • Luca Pitl

    Bravissimo , spieghi perfettamente :)  

    • maurospage

      Grazie :)

  • franco

    Ottimo tutorial!:-)

    • maurospage

      Grazie :)

  • Carlo

    Grazie mille per il tutorial l’ho trovato davvero molto utile.
    Una piccola domanda, io vorrei fare uno slideshow automatico quindi voglio far caricare le immagini quando apro la pagina web.

    Se
    sostituisto nella stringa “$(‘#slide img’).bind(‘click’ , slide);” il
    ‘click’ con un ‘load’ me le carica mandandole a capo. Come posso fare?

    Grazie mille ancora per il tutorial e per l’eventuale risposta :)