Slide show con il plugin Cycle e jQuery
Caratteristiche dello slide show:
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 { display:inline-block; width: 20px; height: 20px; margin-right: 5px; background:url(Immagini/bullet_off.png) no-repeat; } #navslideshow a:hover { background:url(Immagini/bullet_hover.png) no-repeat; } #navslideshow a:last-child { margin-right: 0px; } #navslideshow a.activeSlide { background:url(Immagini/bullet_on.png) no-repeat; }
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 pagerAnchorBuilder: function(index, el) { return ''; // Rimuove il numero dal pager } }); });
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>