Geek Answers Handbook

How do I go through a set of images?

I am trying to make a banner that cycles through 3 images using JavaScript.
Each image must be displayed for 10 seconds before changing.

I wrote the code, but it does not work. He remains in the first image. The image does not change as I want.

Can you see anything in the code and point out my mistakes?

Enter the code as follows:

<script type="text/javascript"> function changeBanner(){ var img = new array img[0] = document.images[0].src img[1] = document.images[1].src img[2] = document.images[2].src var currentimg = img[0] if(currentimg == img[0]) { currentimg = img[1] } if(currentimg == img[1]) { currentimg = img[2] } } </script>

HTML:

 <body onload="var start=setInterval('changeBanner()', 10000;"> <div id="wrapper"> <div> <img src="budda.JPG" width="900px" height="300px" /> </div> ...
+4
source share
5 answers
 var index = 0; function changeBanner() { [].forEach.call(document.images, function(v, i) { document.images[i].hidden = i !== index }); index = (index + 1) % document.images.length; } window.onload = function() { setInterval(changeBanner, 1000) };

http://jsbin.com/emilef/2/edit

+5
source 
 function changeBanner(){ var img = new array img[0] = document.images[0].src img[1] = document.images[1].src img[2] = document.images[2].src var currentimg = img[0]

Now currentimg is img[0]

 if(currentimg == img[0]) {

That will be true. currentimg = img [1]}

Now currentimg has the value img[1]

 if(currentimg == img[1]) {

This will also be true.

  currentimg = img[2] }

currentimg is img[2]

}

Now release the currentimg value

You need to: 1) understand the logic; 2) set a specific DOM object for this new object.

+1
source

There are several functional issues in your code:

  • The code in the onload attribute of the body tag was not closed correctly
  • The code inside changeBanner will always execute all if statements, never progressing with the image loop

Regardless of the corrections, you can make the code a little cleaner, remove the built-in scripts from the body tag and fix the if problem by specifying an index to track the current image in the set.

Assuming you have HTML similar to yours, with three images starting with hidden :

 <body> <div id="wrapper"> <div> <img src="http://placehold.it/100x150" width="300px" height="150px" hidden /> <img src="http://placehold.it/200x250" width="300px" height="150px" hidden /> <img src="http://placehold.it/300x350" width="300px" height="150px" hidden /> </div> </div> </body>

You do not need to use the onload attribute for body .

Using window.onload , you can assign a function that will be called automatically after the load event, which, after the DOM completes and all images are loaded.

It is advisable that all your script code be contained in a separate .js file and include only a link to it in your HTML. However, I just supported your current approach for simplicity.

Inside this function, you can configure your variables and then run an interval similar to this:

 <script type="text/javascript"> var currentImageIndex = -1, maxImageIndex = 0, images = [], changeInterval = 1500; // prepares relevant variables to cycle throguh images var setUp = function() { images = document.images; maxImageIndex = images.length; currentImageIndex = 0; }; // changes the banner currently being displayed var changeBanner = function() { var i; // either re-set the index to 0 if the max length was reached or increase the index by 1 currentImageIndex = (currentImageIndex >= maxImageIndex - 1) ? 0 : currentImageIndex += 1; for (i = 0; i < maxImageIndex; i += 1) { images[i].hidden = (i !== currentImageIndex); } }; // a function which is triggered following the `load` event window.onload = function() { setUp(); images[currentImageIndex].hidden = false; // show the first banner image; setInterval(changeBanner, changeInterval); // following a delay, keep changing the banner image by the specified interval }; </script>

DEMO - Fix logical problems and use windows.onload()

+1
source

Check it out on the console;)

 var imgs=document.images; function changeBanner(){ var firstImgSrc = imgs[0].src + ""; for(var i=0;i<imgs.length-1;i++){ imgs[i].src=imgs[i+1].src+""; } imgs[imgs.length-1].src=firstImgSrc; //replace last image src with first one } var interval = setInterval(changeBanner, 5000);
0
source

setInterval('changeBanner()', 10000; in your code is not closed properly, it is missing ")" after 10000. This should be:

 setInterval('changeBanner()', 10000);

In addition, the setInterval function will be called only when the body is loaded. So just add the function to your JavaScript file and attach it to html. Like this:

 <script type="text/javascript"> function changeBanner(){ var img = new array img[0] = document.images[0].src img[1] = document.images[1].src img[2] = document.images[2].src var currentimg = img[0] if(currentimg == img[0]) { currentimg = img[1] } if(currentimg == img[1]) { currentimg = img[2] } } setInterval('changeBanner()', 10000); </script>
0
source

More articles:


All Articles