Comment faire pour changer une image de page Web avec le temps

L'intégration de JavaScript dans le codage HTML de votre site Web d'entreprise présente de nouvelles méthodes pour fournir des formats plus attrayants visuellement. Par exemple, vous pouvez utiliser JavaScript pour faire pivoter une série d’images de la page sur une période donnée. Pour ce faire, vous tirerez parti de la fonction JavaScript "setTimeout", qui retarde l'action JavaScript, ainsi que de la fonction "getElementbyID" de l'objet "document" JavaScript.

1.

Enregistrez une série d’images dans le répertoire de votre site Web principal. Cet exemple suppose que vous avez un total de quatre images, qu’elles ont la même taille et qu’elles ont été étiquetées séquentiellement comme "image1.jpeg", "image2.jpeg", etc.

2

Ouvrez le document HTML de votre site Web et utilisez le code HTML suivant comme base pour afficher les images dans les balises "body". Ceci ne définit que la première image à afficher et donne un identifiant à la balise image:

3

Insérez le code JavaScript suivant dans les "" balises du document HTML pour inclure JavaScript dans le fichier:

4

Ajoutez le code suivant aux balises JavaScript "script" pour déclarer les variables qui définissent les informations de rotation de base. La variable "current" suit l'image actuelle dans la séquence, la variable "total" stocke le nombre total d'images à faire défiler et la variable "time" stocke l'itération actuelle de l'appel de fonction "setTimeout":

courant var = 1; var total = 4; var time;

5

Créez deux fonctions, "imageChanger" et "changement", qui font pivoter les images séquentiellement, en les changeant toutes les 5 secondes à l’aide de la fonction "setTimeout". Changez la durée entre les commutateurs en ajustant le deuxième argument de la fonction "setTimeout", qui est 5000 dans cet exemple. Rappelez-vous que l'argument est en millisecondes, donc 1000 est égal à 1 seconde:

fonction imageChanger () {time = setTimeout ("change ()", 5000); }

function changeImage () {current ++;

si (en cours> total) currPic = 1;

document.getElementById ("image"). src = "image" + current + ". jpeg";

setupPicChange (); }

6

Ajoutez la commande suivante aux balises "body" du document HTML qui appellera la fonction JavaScript lors du chargement du document. Votre balise d'ouverture "" devrait ressembler à ceci: