Таймаут в слайдшоу

@Vano1996 · Регистрация: 22.12.2020

У меня есть слайдшоу, которые работает нажатием на кнопки вперед и назад, но я так же хочу добавить таймаут, чтобы слайд автоматически менялся через несколько секунд. Как это можно реализовать, не меняя весь код скрипта в моем js?

Мой скрипт

Javascript

var slideIndex = 1;
showSlides(slideIndex);
 
function plusSlides(n) {
  showSlides(slideIndex += n);
}
 
function currentSlide(n) {
  showSlides(slideIndex = n);
}
 
function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
}

@Iverycool · 15.01.2021, 21:34

Vano1996,

Javascript

1	setInterval(() => plusSlides(1), 3000);

@web_coder2 · 15.01.2021, 21:44

Привет Vano1996,

Предлагаю использовать setInterval и события мыши mouseover и mouseleave

Javascript

var interval
var delay = 1000
interval = setInterval(plusSlides, delay, 1)
 
// слайдер останавливается когда пользователь навел на него мышку
document.querySelector(".slider-container").mouseover = _ => clearInterval(interval) 
// слайдер снова запустится когда пользователь уберет мышку
document.querySelector(".slider-container").mouseleave = _ => interval = setInterval(plusSlides, delay, 1)

Добавлено через 1 минуту
Iverycool, привет =)

@Vano1996 · 15.01.2021, 22:08 **[ТС]**

Сообщение от web_coder2

Привет Vano1996,

Предлагаю использовать setInterval и события мыши mouseover и mouseleave

Javascript

var interval
var delay = 1000
interval = setInterval(plusSlides, delay, 1)
 
// слайдер останавливается когда пользователь навел на него мышку
document.querySelector(".slider-container").mouseover = _ => clearInterval(interval) 
// слайдер снова запустится когда пользователь уберет мышку
document.querySelector(".slider-container").mouseleave = _ => interval = setInterval(plusSlides, delay, 1)

Добавлено через 1 минуту
Iverycool, привет =)

спасибо) все работает, но вот только слайдер не останавливается при наведении мыши. Не могли бы вы с этим помочь?

Добавлено через 8 секунд

Сообщение от Iverycool

Vano1996,

Javascript

1	setInterval(() => plusSlides(1), 3000);

спасибо)

@web_coder2 · 15.01.2021, 22:51

Сообщение от Vano1996

спасибо) все работает, но вот только слайдер не останавливается при наведении мыши. Не могли бы вы с этим помочь?

надо смотреть консоль, или выложите сюда весь код, может где то setInterval запускается повторно

@Vano1996 · 15.01.2021, 23:03 **[ТС]**

Сообщение от web_coder2

надо смотреть консоль, или выложите сюда весь код, может где то setInterval запускается повторно

Выкладываю код

HTML5

<div class="banner_blok">
 
    <!-- Slideshow container -->
<div class="slideshow-container">
 
    <!-- Full-width images with number and caption text -->
    <div class="mySlides fade">
      <div class="numbertext">1 / 3</div>
      <div class="banner">
        <div class="banner_text">
            <p class="name_banner1">БЛАГОТВОРИТЕЛЬНЫЙ ФОНД</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>
                Главной целью благотворительного фонда является создание таких условий, при которых у каждого нуждающегося имеется возможность получить помощь, а у каждого благотворителя – возможность ее оказать.
            </p>
            <p>&nbsp;</p>
            <p>
                Благотворительный фонд - эффективное взаимодействие между получателями помощи и благотворителями!
            </p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <div class="knopka2">
                <a href="#" class="button2">
                    <img src="images/serdce_icon.png">
                    ПОМОЧЬ СЕЙЧАС</a>
            </div>
        </div>
     </div>
    </div>
  
    <div class="mySlides fade">
      <div class="numbertext">2 / 3</div>
      <div class="banner">
        <div class="banner_text">
            <p class="name_banner1">ФОНД</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>
                Главной целью благотворительного фонда является создание таких условий, при которых у каждого нуждающегося имеется возможность получить помощь, а у каждого благотворителя – возможность ее оказать.
            </p>
            <p>&nbsp;</p>
            <p>
                Благотворительный фонд - эффективное взаимодействие между получателями помощи и благотворителями!
            </p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <div class="knopka2">
                <a href="#" class="button2">
                    <img src="images/serdce_icon.png">
                    ПОМОЧЬ СЕЙЧАС</a>
            </div>
        </div>
    </div>
    </div>
  
    <div class="mySlides fade">
      <div class="numbertext">3 / 3</div>
      <div class="banner">
        <div class="banner_text">
            <p class="name_banner1">0</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>
                Главной целью благотворительного фонда является создание таких условий, при которых у каждого нуждающегося имеется возможность получить помощь, а у каждого благотворителя – возможность ее оказать.
            </p>
            <p>&nbsp;</p>
            <p>
                Благотворительный фонд - эффективное взаимодействие между получателями помощи и благотворителями!
            </p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <div class="knopka2">
                <a href="#" class="button2">
                    <img src="images/serdce_icon.png">
                    ПОМОЧЬ СЕЙЧАС</a>
            </div>
        </div>
    </div>
    </div>
  
    <!-- Next and previous buttons -->
    <a class="prev" onclick="plusSlides(-1)">❮</a>
    <a class="next" onclick="plusSlides(1)">❯</a>
  </div>
  <br>
  
  <!-- The dots/circles -->
  <div style="text-align:center">
    <span class="dot" onclick="currentSlide(1)"></span>
    <span class="dot" onclick="currentSlide(2)"></span>
    <span class="dot" onclick="currentSlide(3)"></span>
  </div>
 
</div>

CSS

.banner_blok {
    width: 1300px;
    height: auto;
}
 
 
.slideshow-container {
    max-width: 1300px;
    position: relative;
    margin: auto;
}
.mySlides {
    display: none;
}
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
}
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8);
}
.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}
.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}
.active, .dot:hover {
    background-color: #717171;
}
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}
@-webkit-keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}
  
@keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}

Javascript

var slideIndex = 1;
showSlides(slideIndex);
 
// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}
 
// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}
 
function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
}
 
var interval
var delay = 10000
interval = setInterval(plusSlides, delay, 1)
 
// слайдер останавливается когда пользователь навел на него мышку
document.querySelector(".slider-container").mouseover = _ => clearInterval(interval) 
// слайдер снова запустится когда пользователь уберет мышку
document.querySelector(".slider-container").mouseleave = _ => interval = setInterval(plusSlides, delay, 1)

@Iverycool · 15.01.2021, 23:28

Vano1996, тут две ошибки:
1. Вы не заменили "образный" селектор .slider-container на свой .slideshow-container
2. web_coder2 ошибся при записи навешивания обработчиков: mouseover вместо onmouseover

Таким образом, вот правильный код:

Javascript

var delay = 10000;
var interval = setInterval(plusSlides, delay, 1);
 
// слайдер останавливается когда пользователь навел на него мышку
document.querySelector(".slideshow-container").onmouseover = _ => clearInterval(interval);
// слайдер снова запустится когда пользователь уберет мышку
document.querySelector(".slideshow-container").onmouseleave = _ => interval = setInterval(plusSlides, delay, 1);

Не по теме:

web_coder2, да, привет) Кстати, прикольная ава)

@web_coder2 · 15.01.2021, 23:35

Не по теме:

Сообщение от Iverycool

web_coder2, да, привет) Кстати, прикольная ава)

Спасибо ^^

@Vano1996 · 15.01.2021, 23:42 **[ТС]**

Сообщение от Iverycool

Vano1996, тут две ошибки:
1. Вы не заменили "образный" селектор .slider-container на свой .slideshow-container
2. web_coder2 ошибся при записи навешивания обработчиков: mouseover вместо onmouseover

Таким образом, вот правильный код:

Javascript

var delay = 10000;
var interval = setInterval(plusSlides, delay, 1);
 
// слайдер останавливается когда пользователь навел на него мышку
document.querySelector(".slideshow-container").onmouseover = _ => clearInterval(interval);
// слайдер снова запустится когда пользователь уберет мышку
document.querySelector(".slideshow-container").onmouseleave = _ => interval = setInterval(plusSlides, delay, 1);

Не по теме:

web_coder2, да, привет) Кстати, прикольная ава)

Благодарочка)

Таймаут в слайдшоу

Решение

Решение

@web_coder2 741 / 347 / 99 Регистрация: 04.10.2018 Сообщений: 545
	15.01.2021, 22:51	5
	Сообщение от Vano1996 спасибо) все работает, но вот только слайдер не останавливается при наведении мыши. Не могли бы вы с этим помочь? надо смотреть консоль, или выложите сюда весь код, может где то setInterval запускается повторно 0

@web_coder2
	15.01.2021, 23:35 #8
	Не по теме: Сообщение от Iverycool web_coder2, да, привет) Кстати, прикольная ава) Спасибо ^^ 0