Nwlapcug.com


Come ruotare foto in slideshow con JavaScript

Come ruotare foto in slideshow con JavaScript


JavaScript è spesso usato per produrre effetti dinamici nelle pagine Web non è possibile con l'HTML da solo. JavaScript ti offre un sacco di controllo sugli elementi della pagina, anche dopo che viene caricato. Ad esempio, è possibile modificare l'attributo "src" del tag "img" di swap su un'immagine nella pagina. Espandere questa azione per creare una presentazione di foto per i visitatori al tuo sito Web.

Istruzioni

1

Inserire il codice JavaScript seguente tra i tag di "head" del documento HTML:

< script type = "text/javascript" >

set foto var = {

slideshow1:[0,["Dog.jpg","Cat.jpg","Horse.jpg","Snake.jpg"]],

slideshow2:[0,["Apple.jpg","banana.jpg","Grape.jpg","Melon.jpg","Berry.jpg"]]

};

Function rotatePhotos(id) () {

document.getElementById(id).src = photosets[id][1][photosets[id][0]];

photosets[id][0] += 1;

photosets[id][0] %= photosets[id][1].length;

}

< / script >

Modificare la dichiarazione della variabile "Biography" per configurare il tuo slideshow. Assegnare ciascuna presentazione un nome univoco (ad esempio, "slideshow1," "slideshow2," ecc.) seguita da due punti. Elencare i nomi dei file delle foto nella presentazione all'interno del set interno di parentesi quadre, racchiuso tra virgolette e separati da virgole. Ogni presentazione può essere lungo quanto vuole. Slideshow separati con virgole come mostrato.

2

Aggiungere il seguente codice al corpo del documento HTML per inserire la presentazione nella pagina:

< img id = "slideshow1" / >

< tipo input = "pulsante" value = "Immagine successiva" onClick="rotatePhotos('slideshow1');" / >

Ripetere questo codice per ogni presentazione che si desidera inserire nella pagina, modificando i nomi di slideshow nel "img" e "input" tag per specificare la presentazione che si desidera.

3

Salvare la pagina e caricarlo in un browser Web. Fare clic sul pulsante per far avanzare la presentazione. Le presentazioni sono vuote in un primo momento; aggiungere chiamate della funzione "rotatePhotos" nell'attributo "onLoad" del tag "body" per inizializzarli quando la pagina viene caricata. Per esempio:

< corpo onLoad="rotatePhotos('slideshow1');rotatePhotos('slideshow2');" >