web-dev-qa-db-fra.com

Changer l'image dans la page HTML toutes les quelques secondes

Je veux changer les images toutes les quelques secondes, voici 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 qu'il est bloqué sur la première photo!

Je voulais aussi essayer de feuilleter les images avec les boutons précédents et suivants, mais je ne sais pas comment faire.

javascripthtmlimagetimer
22
user1834091

Comme je l'ai écrit dans le commentaire, vous n'avez pas besoin d'utiliser à la fois setTimeout() et setInterval(), de plus, vous avez également une erreur de syntaxe (celle supplémentaire }). Corrigez votre code comme ceci:

(édité pour ajouter deux fonctions pour forcer l'affichage de l'image suivante/précédente)

<!DOCTYPE html>

<html>
   <head>
      <title>change picture</title>
      <script type = "text/javascript">
          function displayNextImage() {
              x = (x === images.length - 1) ? 0 : x + 1;
              document.getElementById("img").src = images[x];
          }

          function displayPreviousImage() {
              x = (x <= 0) ? images.length - 1 : x - 1;
              document.getElementById("img").src = images[x];
          }

          function startTimer() {
              setInterval(displayNextImage, 3000);
          }

          var images = [], x = -1;
          images[0] = "image1.jpg";
          images[1] = "image2.jpg";
          images[2] = "image3.jpg";
      </script>
   </head>

   <body onload = "startTimer()">
       <img id="img" src="startpicture.jpg"/>
       <button type="button" onclick="displayPreviousImage()">Previous</button>
       <button type="button" onclick="displayNextImage()">Next</button>
   </body>
</html>
25
Adriano Repetti

ci-dessous changera le lien et la bannière toutes les 10 secondes

   <script>
        var links = ["http://www.abc.com","http://www.def.com","http://www.ghi.com"];
        var images = ["http://www.abc.com/1.gif","http://www.def.com/2.gif","http://www.ghi.com/3gif"];
        var i = 0;
        var renew = setInterval(function(){
            if(links.length == i){
                i = 0;
            }
            else {
            document.getElementById("bannerImage").src = images[i]; 
            document.getElementById("bannerLink").href = links[i]; 
            i++;

        }
        },10000);
        </script>



<a id="bannerLink" href="http://www.abc.com" onclick="void window.open(this.href); return false;">
<img id="bannerImage" src="http://www.abc.com/1.gif" width="694" height="83" alt="some text">
</a>
5
Marcin Wasiluk

À partir de la version actuelle du message, vous appelez setInterval à la fin de chaque modification, en ajoutant un nouveau "changeur" ​​à chaque nouvelle iterration. Cela signifie qu'après la première utilisation, il y en a une en mémoire, après 100 exécutions, 100 changeurs différents changent d'image 100 fois par seconde, ce qui détruit complètement les performances et produit des résultats confus.

Il suffit de "amorcer" setInterval une fois. Supprimez-le de la fonction et placez-le dans onload au lieu de l'appel direct à la fonction.

2
Oleg V. Volkov

Remplacez setTimeout("changeImage()", 30000); par setInterval("changeImage()", 30000); et supprimez var timerid = setInterval(changeImage, 30000);.

2
Paul Fleming

Vous pouvez charger les images au début et modifier les attributs css pour afficher chaque image.

var images = array();
for( url in your_urls_array ){
   var img = document.createElement( "img" );
   //here the image attributes ( width, height, position, etc )
   images.Push( img );
}

function player( position )
{
  images[position-1].style.display = "none" //be careful working with the first position
  images[position].style.display = "block";
  //reset position if needed
  timer = setTimeOut( "player( position )", time );
}
1
Alexis

Meilleur moyen d'échanger des images avec javascript avec des vignettes cliquables verticales à gauche

SCRIPT FILE: fonction swapImages () {

    window.onload = function () {
        var img = document.getElementById("img_wrap");
        var imgall = img.getElementsByTagName("img");
        var firstimg = imgall[0]; //first image
        for (var a = 0; a <= imgall.length; a++) {
            setInterval(function () {
                var Rand = Math.floor(Math.random() * imgall.length);
                firstimg.src = imgall[Rand].src;
            }, 3000);



            imgall[1].onmouseover = function () {
                 //alert("what");
                clearInterval();
                firstimg.src = imgall[1].src;


            }
            imgall[2].onmouseover = function () {
                clearInterval();
                firstimg.src = imgall[2].src;
            }
            imgall[3].onmouseover = function () {
                clearInterval();
                firstimg.src = imgall[3].src;
            }
            imgall[4].onmouseover = function () {
                clearInterval();
                firstimg.src = imgall[4].src;
            }
            imgall[5].onmouseover = function () {
                clearInterval();
                firstimg.src = imgall[5].src;
            }
        }

    }


}
0
cerberus