This code does not work here (for a slide banner):

function slideBannerAnimation(numbersOfSlides){ var currentSlide = 0; var clicked = false; $("#slideBanner").css({overflow:"hidden", height:"432px"}); $(".control").css("display", "block") .click(function(){ currentSlide = ($(this).attr("id") == "toPrevious")?currentSlide-1:currentSlide+1; clicked = true; if(currentSlide < 0) currentSlide = numbersOfSlides; if(currentSlide > numbersOfSlides) currentSlide = 0; $("#slideContainer").animate({ "margin-left":$(document).width()*(-currentSlide) }, 800); }); if(!clicked){//С этого момента не работает. Всё остальное, как по часам setInterval(function(){ $("#slideContainer").animate({ "margin-left":$(document).width()*(-currentSlide) }); }, 3000); } }

Tell me how to make the animation trigger at intervals if the user has not clicked on the control buttons.

  • What makes you think that does not work? You have currentSlide always zero every time setInterval fits - Jean-Claude
  • I did not notice, thanks for the tip. - Dima Lukashov

1 answer 1

 function slideBannerAnimation(numbersOfSlides){ var currentSlide = 0; var timerID; // переменная для хранения ID таймера // функция прокрутки слайда slide = function (back) { currentSlide = back ? currentSlide - 1 : currentSlide + 1; if (currentSlide < 0) currentSlide = numbersOfSlides; if (currentSlide > numbersOfSlides) currentSlide = 0; $("#slideContainer").animate({ "margin-left": $(document).width() * (-currentSlide) }, 800); } $("#slideBanner").css({overflow: "hidden", height: "432px"}); $(".control").css("display", "block") .click(function(){ slide($(this).attr("id") == "toPrevious"); clearInterval(timerID); // остановить таймер }); // запуск таймера timerID = setInterval(function(){ slide(); // если надо в обратную сторону, то slide(true) }, 3000); }
  • Thank you very much. Understood the idea of ​​your code, very gracefully. - Dima Lukashov