2

Всем привет! Делаю слайдер на чистом JS, нужно чтобы слайды переключались сами в определенное время. Можно ли как-то установить, чтобы после ручного переключения слайда пользователем таймер обнулялся и не случалось такого, чтобы сразу после клика переключалась еще одна страница слайда сразу же?

HTML + CSS + JS: https://jsfiddle.net/k72nth41/

Сам JS:

let slideIndex = 1;
showSlides(slideIndex);

let prev = document.getElementById ('prev');
let next = document.getElementById ('next');

next.addEventListener ("click", function () {
  showSlides(slideIndex += 1);

});

prev.addEventListener ("click", function () {
  showSlides(slideIndex -= 1);
});

function currentSlide(n) {
  showSlides(slideIndex = n);
}


function showSlides(n) {
    let slides = document.getElementsByClassName("myslide");
    if (n > slides.length) {
      slideIndex = 1;
    }
    if (n < 1) {
        slideIndex = slides.length;
    }
 
    for (let slide of slides) {
        slide.style.display = "none";
    }
    slides[slideIndex - 1].style.display = "flex";    
  }

 let timer = setInterval(function(){
    slideIndex++;
    showSlides(slideIndex);
  },5000);
2
  • Хорошо бы, чтоб Вы добавили в вопрос стили и разметку - чтобы можно было воспроизвести пример 26 фев 2021 в 12:40
  • @humster_spb спасибо за правку, код добавила.
    – darya lewy
    26 фев 2021 в 12:54

2 ответа 2

3

Вот такое решение у меня получилось. Я использовал clearInterval() для прерывания работы интервала. После "очистки" интервал вновь создастся и будет выполнять перелистывание каждые 5 секунд. (Я добавил таймер и покрасил картинки в разные цвета, чтобы было более понятно что вообще происходит.)

let slideIndex = 1;
showSlides(slideIndex);

let prev = document.getElementById ('prev');
let next = document.getElementById ('next');

next.addEventListener ("click", function () {
  showSlides(slideIndex += 1);
  makeTimer();//Пересоздаем интервал если производится нажатие 
});

prev.addEventListener ("click", function () {
  showSlides(slideIndex -= 1);
  makeTimer();//Пересоздаем интервал если производится нажатие 
});

function currentSlide(n) {
  showSlides(slideIndex = n);
}


function showSlides(n) {
    let slides = document.getElementsByClassName("myslide");
    if (n > slides.length) {
      slideIndex = 1;
    }
    if (n < 1) {
        slideIndex = slides.length;
    }
 
    for (let slide of slides) {
        slide.style.display = "none";
    }
    slides[slideIndex - 1].style.display = "flex";    
  }
 var timer = 0;
 makeTimer(); //Создаем интервал 
 function makeTimer(){
    clearInterval(timer) //Очистим интервал, это позволит прервать его работу и отменить перелистывание
    timer = setInterval(function(){
      slideIndex++;
      showSlides(slideIndex);
    },5000);
  }
  
  
 //Таймер, (чтобы было удобнее считать время) можно удалить
 var seconds = 5;
 setInterval(()=>{
    seconds = seconds - 1;
    if(!seconds){seconds = 5;}
        document.getElementById("timeVisual").innerHTML = seconds
 },1000)
.slider_wrapper {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}
.myslide {
  display: none;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}
.myslide img {
  margin-right: 15px;
  margin-left: 15px;
}
.slider_wrapper a {
  cursor: pointer;
}
.pack_1{
     background-color: red;
}
.pack_2{
     background-color: green;
}
.pack_3{
     background-color: blue;
}
.pack_4{
     background-color: orange;
}
<div class="slider_wrapper">
  <a id="prev"><img src="/img/slides/prev.min.png" alt="prev"></a>
  
  <div class="myslide">
    <div class="slider_item pack_1"><img src="img/slides/1.png" alt="1"></div>
    <div class="slider_item pack_1"><img src="img/slides/2.png" alt="2"></div>
    <div class="slider_item pack_1"><img src="img/slides/3.png" alt="3"></div>
  </div>
  <div class="myslide">
    <div class="slider_item pack_2"><img src="img/slides/7.png" alt="8"></div>
    <div class="slider_item pack_2"><img src="img/slides/8.png" alt="sl"></div>
    <div class="slider_item pack_2"><img src="img/slides/9.png" alt="sl"></div>
  </div>
  <div class="myslide">
    <div class="slider_item pack_3"><img src="img/slides/13.png" alt="sl"></div>
    <div class="slider_item pack_3"><img src="img/slides/14.png" alt="sl"></div>
    <div class="slider_item pack_3"><img src="img/slides/15.png" alt="sl"></div>
  </div>
  <div class="myslide">
    <div class="slider_item pack_4"><img src="img/slides/17.png" alt="sl"></div>
    <div class="slider_item pack_4"><img src="img/slides/18.png" alt="sl"></div>
    <div class="slider_item pack_4"><img src="img/slides/19.png" alt="sl"></div>
  </div>  

  <a id="next"><img src="/img/slides/next.min.png" alt="next"></a>
</div>
<h1 id="timeVisual"><h1>

1

Чтобы двойных переходов не было, ловите клик на кнопки и запускаете функцию, которая очищает созданный вами таймер/интервал, и со след строчки снова запустите таймер/интервал, выходит что при нажатии на кнопки отсчет обнуляется и считает заново.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.