Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Slideshow con preload

Link copiato negli appunti

Lo script che presentiamo è un interessante slideshow con preload. Le foto, dopo essere state precaricate nella cache del computer, scorreranno tramite due bottoni. Non c'è limite alla immagini inseribili anche se, ovviamente, più saranno numerose e più ci vorrà tempo per il preload.
Il codice è perfettamente compatibile con i tre maggiori browser in circolazione: Explorer 5.x, Navigator 4.x e Netscape 6.x.
L'esempio si compone di 4 file:

  • esempio.htm
  • 01.gif
  • 02.gif
  • 03.gif

Per una più semplice comprensione del presente script fai continuamente riferimento ai file sopracitati, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.

Inseriamo il codice javascript tra i tag <head> della pagina:

<script type="text/javascript" language="javascript">
var Slides = new Array('01.gif','02.gif','03.gif');
function CacheImage(ImageSource) {
var ImageObject = new Image();
ImageObject.src = ImageSource;
return ImageObject;
}
function ShowSlide(Direction) {
if (SlideReady) {
NextSlide = CurrentSlide + Direction;
document.SlideShow.Previous.disabled = (NextSlide == 0);
document.SlideShow.Next.disabled = (NextSlide ==
(Slides.length-1));
if ((NextSlide>= 0) && (NextSlide < Slides.length)) {
document.images['Screen'].src = Slides[NextSlide].src;
CurrentSlide = NextSlide++;
Message = 'Picture ' + (CurrentSlide+1) + ' of ' +
Slides.length;
self.defaultStatus = Message;
if (Direction == 1) CacheNextSlide();
}
return true;
}
}
function Download() {
if (Slides[NextSlide].complete) {
SlideReady = true;
self.defaultStatus = Message;
}
else setTimeout("Download()", 100);
return true;
}

function CacheNextSlide() {
if ((NextSlide < Slides.length) && (typeof Slides[NextSlide] ==
'string'))
{
SlideReady = false;
self.defaultStatus = 'Downloading next picture...';
Slides[NextSlide] = CacheImage(Slides[NextSlide]);
Download();
}
return true;
}
function StartSlideShow() {
CurrentSlide = -1;
Slides[0] = CacheImage(Slides[0]);
SlideReady = true;
ShowSlide(1);
}
</script>

Non dobbiamo fare altro che inserire, dentro un array, i nomi delle immagini da precaricare.

var Slides = new Array('01.gif','02.gif','03.gif');

Per aggiungere una nuova immagine basterà inserire, nelle parentesi tonde, una virgola ed il nome della foto tra due apici singoli.

A questo punto dobbiamo impostare, nel punto desiderato della pagina, l'immagine di partenza dello slideshow:

<img name="screen" width=100 height=100/>

Cosa importante è lasciare invariato l'attributo "Screen" all'interno del tag <img...>
Successivamente prepariamo il form contenente i bottoni per lo scorrimento della galleria:

<form name="SlideShow">
<input type="button" name="Previous" value=" << " onClick="ShowSlide(-1)">
<input type="button" name="Next" value=">> " onClick="ShowSlide(1)">
</form>

In ultimo non resta che far partire una funzione al caricamento della pagina. Nel tag <body...> inseriamo il gestore di eventi onLoad:

onLoad="StartSlideShow()"

Il nostro <body...> quindi sarà di questo tipo:

<body bgcolor="white" vlink="blue" link="blue" onload="startslideshow()">

Altre modifiche non sono necessarie.


Ti consigliamo anche