There is a method:

Menu.prototype.init = function () { var self = this; function sliding(item, step) { var i = 0; var imgs = Array.prototype.slice.apply(item.querySelectorAll('img')); var len = imgs.length; function next() { imgs[i].style.opacity = 0; if(i == len - 1) { imgs[0].style.opacity = 1; } else { imgs[i+1].style.opacity = 1; } i++; if(i == len) { i = 0; } console.log(i); } setInterval(next, step); } function start(items, step) { for(var i = 0; i < items.length; i++) { step += 200; (function(i, step) { sliding(items[i], step); })(i, step); } } start(this.items, 3000); }

The method works but not as intended, as I understand it is in the timers .. The idea was that the pictures would change consistently and when you first start it happens ... but then they begin to change chaotically. Tell me the direction of finding a solution? See the script here.

  • postavte instead setInterval setTaymout - L. Vadim
  • @L. Vadim what will it give? - pepel_xD
  • sequence of function execution @pepel_xD - DimenSi

1 answer 1

Use setTimeout for this instead of an interval. Just because when setInterval will run a trace. function, even if the past did not have time to end, this is the whole problem. In your code, you do not clear the "timer". You have to clean it up so that there is at least some sequence.
Here is my example, only with recursive setTimeout.
This article tells why setTimeout> setInterval

 const imgs = Array.from(document.querySelectorAll('img')); let currentTimer; function carusel(arr) { const [head, ...last] = arr; if (!head) { console.log('элементы закончились, очищаю стили и запускаю по новой.'); imgs.forEach(el => { el.removeAttribute('style'); }); currentTimer = setTimeout(function() { carusel(imgs); }, 200); } else { head.style.opacity = 1; currentTimer = setTimeout(function() { carusel(last); }, 200); } } document.querySelector('.start').onclick = function() { carusel(imgs); } document.querySelector('.stop').onclick = function() { clearTimeout(currentTimer); } 
 img { opacity: 0; transition: 0.3s; } 
 <button class='start'>start</button> <button class='stop'>stop</button> <div> <img src="https://dummyimage.com/100x100/000/fff" alt=""> <img src="https://dummyimage.com/100x100/000/fff" alt=""> <img src="https://dummyimage.com/100x100/000/fff" alt=""> <img src="https://dummyimage.com/100x100/000/fff" alt=""> <img src="https://dummyimage.com/100x100/000/fff" alt=""> <img src="https://dummyimage.com/100x100/000/fff" alt=""> <img src="https://dummyimage.com/100x100/000/fff" alt=""> <img src="https://dummyimage.com/100x100/000/fff" alt=""> <img src="https://dummyimage.com/100x100/000/fff" alt=""> <img src="https://dummyimage.com/100x100/000/fff" alt=""> <img src="https://dummyimage.com/100x100/000/fff" alt=""> </div>

  • it would be nice to attach as executable - webDev_
  • did not understand your comment. - DimenSi
  • with the ability to run code - webDev_
  • @webDev_ I have a code and so in the snippet, what are you talking about? - DimenSi
  • Yes, thanks, I understood about the timer. But did a little girlfriend. And you have images in one diva, I have 6 divs in each of which images .. and they should change cyclically, the first launch showed the first images, the second second and so on - pepel_xD