Handpuzzles.com


Comment faire un changement page Web de l'image avec le temps

May 19

Comment faire un changement page Web de l'image avec le temps

Les pages Web utilisent le code JavaScript à faire diverses choses se produisent à des intervalles de temps fixés. Ce est le code côté client, et a donc lieu dans le navigateur Web, l'exécution que le visiteur visualise et d'interagir avec votre page. Modification des images rend l'expérience de l'affichage d'une page Web plus dynamique, et ce est un effet qui est facile à mettre en œuvre et ne nécessite qu'une petite quantité de code JavaScript pour fonctionner.

Instructions


•  Préparez vos photos. Assurez-vous que vos images Web sont coupées à la taille correcte, de préférence toutes la même taille afin qu'ils puissent être effectivement affichées dans vos pages Web sans bouleverser l'autre contenu. Essayez de minimiser la taille des fichiers, en les gardant aussi faible que possible tout en se assurant qu'ils sont toujours de bonne qualité. Donnez vos noms images qui reflètent une certaine séquence numérique (par exemple, "pic1.jpg" puis "pic2.jpg") de sorte que la fonction ne est d'identifier le nombre.

•  Créez votre page Web à l'aide des structures HTML. Utilisez le schéma suivant, changeant le nom du fichier image en fonction de votre propre: <html> <head> </ head> <body> <div> <img id = "image" src = "image" "de pic1.jpg" alt = /> </ div> </ body> </ html> Dans ce cas, les images doivent être dans le même répertoire que la page Web. La structure tient d'abord la première image à afficher.

•  Ajouter code JavaScript pour garder le temps. Insérer le texte suivant dans votre section page de tête: <script type = "text / javascript"> var currPic = 1; totPics var = 3; var garder le temps; setupPicChange fonction () {keepTime = setTimeout ("changePic ()", 5000); } Function changePic () {currPic ++; if (currPic> tot Pics) currPic = 1; . ". jpg" document.getElementById src = "pic" ("image") + currPic +; setupPicChange (); } </ Script> Modifier le nombre "de totPics" en fonction toutefois de nombreuses images que vous avez.

•  Réglez la page pour démarrer la minuterie. Ajouter à votre page élément de corps comme suit: <body onload = "setupPicChange ();"> Cela rend le démarrage de la minuterie lorsque la page est chargée. Après cinq secondes, l'image est modifiée à l'autre dans la séquence et la minuterie commence maintenant à nouveau comptage. Le numéro de séquence est commencée à 1 et incrémenté à chaque fois que la minuterie est épuisée, de sorte que l'image change son attribut source à la suivante dans la séquence. Alternativement nommer vos images tout ce que vous voulez et les conserver leurs noms de fichiers dans un tableau, une boucle à travers ce lieu d'utiliser un numéro de séquence.

•  Ecouter pour l'interaction de l'utilisateur avec votre page Web. Selon le but de votre page, vous pouvez modifier la façon dont il fonctionne comme l'utilisateur interagit avec elle. Par exemple, pour arrêter l'image de changer pendant que l'utilisateur a sa souris a plané au-dessus, ajoutez la ligne suivante à votre code d'image: <img id = "image" src = "pic1.jpg" alt = "image" onmouseover = "stop minuterie (); " onmouseout = "démarrer la minuterie ();" /> Ajouter à la JavaScript: minuterie d'arrêt d'function () {Timeout clair (keepTime); } Function démarrer la minuterie () {keepTime = setTimeout ("changePic ()", 5000); }




Articles Liés

        

Publish my comment