Immagini che cambiano automaticamente sono intrinsecamente interessante da guardare, che li rende ideali per mantenere gli spettatori sul tuo sito Web. Immagine in bicicletta richiede solo poche righe di JavaScript. Un approccio si basa sull'istruzione setInterval, che esegue qualsiasi funzione che si sceglie a intervalli periodici. Per posizionare facilmente le immagini nella posizione desiderata sulla tua pagina Web, è necessario specificare le coordinate del luogo con le proprietà Top e Left del CSS.

Istruzioni

1

Aprire il blocco note e quindi incollare le seguenti istruzioni HTML nel documento. Queste istruzioni definiscono una base Web pagina vuota, in cui è possibile inserire istruzioni per la visualizzazione cicliche immagini:

< HTML >
< HEAD >
< / HEAD >
< BODY >
< / BODY >
< / HTML >

2

Incollare le seguenti istruzioni dopo il tag HTML < BODY >. Questo tag definisce un segnaposto per un file immagine chiamato "b1.jpg." Anche se questa affermazione è hardcoded, istruzioni JavaScript e CSS possono cambiare posizione e il contenuto del segnaposto:

< img id = "someImage" src="b1.jpg" >

3

Incollare le seguenti istruzioni JavaScript appena sopra il tag < img >. Le dichiarazioni prima della funzione changeImage creano immagine variabili per tale funzione e quindi utilizzano setInterval per chiamare tale funzione a intervalli periodici. La funzione changeImage utilizza l'istruzione Document. getElementById per inserire il tag < img > immagini dalla matrice myImages:

< script type = "text/javascript" language = "javascript" >
var idxImage = 0;
myImages var = new Array ("b1.jpg", "b2.jpg", "b3.jpg", "b4.jpg");
var i = setInterval (changeImage, 2500);

funzione changeImage()
{
idxImage + +;
Se (idxImage = = myImages.length)
idxImage = 0;
document.getElementById('someImage').src = myImages [idxImage];

}
< / script >

4

Incollare le seguenti istruzioni CSS immediatamente sotto il tag < HEAD >. Queste istruzioni indicano la posizione della pagina < img > tag, in unità di pixel. Questa posizione può essere ovunque che si specifica. Digitare i valori 200 e 230 mostrato qui con valori diversi..--all'incirca da zero a 800 per la proprietà Top e zero a 1000 per la proprietà a sinistra. La risoluzione dello schermo del PC o altro dispositivo che mostra la pagina Web imposta l'intervallo effettivo e di conseguenza varierà. Tuttavia, tutti i dispositivi visualizzerà le immagini in alto a sinistra se si digita "0" per le proprietà superiore e sinistro:

< style >

someImage

{
Posizione: fisso;
Top: 230px;
sinistra: 200px;
}
< / stile >

5

Salvare il file con l'estensione ". htm" e quindi copiare quattro immagini numerate consecutivamente da "b1.jpg" attraverso "b4.jpg" nella stessa cartella.

6

Aprire la pagina Web nel browser Web per visualizzare le immagini in continuo cambiamento.

Consigli & Avvertenze

• Sempre tenere a mente per cercare le immagini che sono liberi di utilizzare, o sono in quello che viene chiamato la licenza Creative Commons. In caso contrario, si potrebbero violare di qualcuno "diritti di proprietà intellettuale." Anche se è comunemente fatto - la gente ruba immagini di altre persone tutto il tempo - è in realtà un crimine, per non parlare di una cosa scadente da fare. C'è più che sufficiente materiale là fuori dato via gratis.
• Informazioni contenute in questo articolo si applica a HTML 5. Essa può variare leggermente o significativamente con altre versioni.