Slide show con pager numerico utilizzando jQuery e il plug-in Cycle

Precedente Successiva Torna all'elenco Chiudi

Slide show con il plugin Cycle e jQuery

Caratteristiche dello slide show:

  • pager numerico con effetto rollover
  • captions
  • foto in dimensioni differenti centrate orizzontalmente

 

Caption della prima slide

Caption della seconda slide

Caption della quinta slide

 

Elementi grafici di Fireworks

 

Codice CSS

      #slideshow {
         width: 400px;
         height: 440px;
         overflow: hidden;
         margin-top: 0px;
         margin-right: auto;
         margin-bottom: 0px;
         margin-left: auto;
         padding: 0px;
      }
      
      .slide {
         width: 400px;
         height: 440px;
         text-align: center;
      }
      
      
      #navslideshow {
         width: 400px;
         margin-right: auto;
         margin-left: auto;
         height: 20px;
         text-align: center;
      }
      
      #navslideshow a:link {
         display:inline-block;
         width: 20px;
         height: 20px;
         margin-right: 5px;
         text-decoration: none;
         background-image: url(Immagini/bullet_off.png);
         background-repeat: no-repeat;
         line-height: 20px;
         text-align: center;
         color: #000;
         font-size: 10px;
      }
      
      #navslideshow a:hover {
         background:url(Immagini/bullet_hover.png) no-repeat;
         text-decoration: none;
         color: #000;
      }
      
      #navslideshow a:last-child {
         margin-right: 0px;
         text-decoration: none;
         color: #000;
      }
      
      #navslideshow a.activeSlide {
         background:url(Immagini/bullet_on.png) no-repeat;
         text-decoration: none;
         color: #000;
      }
      

Codice JavaScript

      $(document).ready(function() {
         $('#slideshow').cycle({
            fx:		'fade',	// Dissolvenza
            speed:    1000,	// Velocità dell'animazione
            timeout:  2000,	// Tempo di permanenza di una slide
            pause:       1,	// Se 1 mette in pausa quando il mouse è sopra lo slide show, altrimenti 0
            startingSlide: 0,	// Parte dalla prima slide
            pager:	'#navslideshow'	// Crea la lista dei link per passare da una slide all'altra
         });
      });
      

Codice Html

<div id="slideshow">
<div class="slide"> <img src="Foto/slide_01.jpg" /> <p>Caption della prima slide</p> </div> <div class="slide"> <img src="Foto/slide_02.jpg" /> <p>Caption della seconda slide</p> </div> <div class="slide"> <img src="Foto/slide_03.jpg" /> </div> <div class="slide"> <img src="Foto/slide_04.jpg" /> </div> <div class="slide"> <img src="Foto/slide_05.jpg" /> <p>Caption della quinta slide</p> </div>
</div>
<div id="navslideshow"></div>

 

Matteo Varisco
Via Pardini, 138
54038 - Montignoso (MS)
Località Cinquale - Italy
P.IVA 01027000452
C.F. VRSMTT71R16F704B
Privacy e Cookies
Preferenze Cookie