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
- Comment faire un changement d'image sur Mouseover
- Comment savoir quand une page web a été mis à jour
- Comment faire pivoter des pages PDF pour Free
- Comment faire tourner une page dans Chrome
- Comment faire un bouton de soumission en une image personnalisée
- Comment faire une photo ressembler à elle a été prise avec un Fish-eye
- Comment faire un porte-badge et cou Porte-monnaie avec un modèle et Instructions gratuit
- Comment faire un calendrier de l'Avent en bois avec des photos
- Comment faire un effet de pulvérisation de peinture Avec Sérigraphie