Changer l'image dans la page HTML toutes les quelques secondes
Je veux changer les images de quelques secondes, c'est mon code:
<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>change picture</title>
<script type = "text/javascript">
function changeImage()
{
var img = document.getElementById("img");
img.src = images[x];
x++;
if(x >= images.length){
x = 0;
}
var timerid = setInterval(changeImage(), 1000);
} }
var images = [], x = 0;
images[0] = "image1.jpg";
images[1] = "image2.jpg";
images[2] = "image3.jpg";
</script>
</head>
<body onload = "changeImage()">
<img id="img" src="startpicture.jpg">
</body>
</html>
Mon problème est que ses collé sur la première photo!
J'ai aussi voulu essayer d'en feuilleter les photos avec les boutons précédent et suivant, mais je n'ai aucune idée de comment faire cela.
source d'informationauteur user1834091
Vous devez vous connecter pour publier un commentaire.
Comme je l'ai posté dans le commentaire que vous n'avez pas besoin d'utiliser les deux
setTimeout()
etsetInterval()
d'ailleurs vous avez une erreur de syntaxe (l'un de plus}
). Corriger votre code comme ceci:(édité pour ajouter deux fonctions à la force de l'image suivante/précédente pour être montré)
ci-dessous permettra de modifier le lien et la bannière toutes les 10 secondes
Changement
setTimeout("changeImage()", 30000);
àsetInterval("changeImage()", 30000);
et supprimervar timerid = setInterval(changeImage, 30000);
.Comme de l'actuelle version modifiée de la poste, vous appelez
setInterval
à chaque changement de la fin, l'ajout d'une nouvelle "donne" à chaque nouvelle iterration. Cela signifie que, après la première exécution, il y a un de leur tic-tac dans la mémoire, après plus de 100 pistes, 100 différents changeurs de changer l'image de 100 fois par seconde, détruisant complètement la performance et de produire des résultats confus.Vous avez seulement besoin de "premier"
setInterval
une fois. Supprimer de la fonction et de la placer à l'intérieur deonload
au lieu de direct appel de fonction.Vous pouvez charger les images au début et à modifier les attributs css pour afficher chaque image.
Meilleur moyen pour permuter les images avec javascript avec vertical de gauche vignettes cliquables
FICHIER DE SCRIPT:
fonction swapImages() {