There are 4 pictures: first , second , third , fourth .

It is necessary that they replace each other after a certain time pokrugu as in the slider. This is what I did - https://jsfiddle.net/drebqy5j/

<img src="http://rako-apk.ru/design/test1.jpg" width="100%" border="0" alt="" id="bannerI">

Pictures change in turn, but the last picture changes the first one longer than the others. There is a short sagging. How to fix it? Are there any other solutions how to implement a picture change in a circle?

  • Paste the snippet with the code into the question, not the link. - ilyaplot

2 answers 2

The zeroing of the variable occurred, but the action was not performed, hence one iteration was performed without changing the picture.

 var numB = 0; function CNumber() { numB = (numB < 4) ? numB+1 : 1; var myNumber= 'http://rako-apk.ru/design/test' + numB + '.jpg'; document.getElementById('bannerI').src=myNumber; } setInterval(CNumber, 1000); 
 <img src="http://rako-apk.ru/design/test1.jpg" width="100%" border="0" alt="" id="bannerI">

  • Thanks, that is necessary. - Eugene_21

If the code above does not work, because you need to receive pictures from different URLs, then try this:

 var params = { now: -1, links: [ "https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_looks_one_48px-128.png", "https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_looks_two_48px-128.png", "https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_looks_3_48px-128.png", "https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_looks_4_48px-128.png" ] }; function change_image(image) { if((params.now + 1) == params.links.length) { params.now = 0; } else { params.now++; } image.setAttribute("src", params.links[params.now]); } window.addEventListener("load", function() { var image = document.getElementsByClassName("image")[0]; change_image(image); setInterval(function() { change_image(image); }, 1000); }, false); 
 <img class="image">