Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/11: Рейтинг темы: голосов - 11, средняя оценка - 5.00
0 / 0 / 0
Регистрация: 22.12.2020
Сообщений: 44
1

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

15.01.2021, 21:03. Просмотров 2137. Ответов 8
Метки js (Все метки)

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

Мой скрипт
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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";
}
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
15.01.2021, 21:03
Ответы с готовыми решениями:

СлайдШоу
Доброго времени суток. Как реализовать последовательную смену фотографий, которые были выбраны (...

слайдшоу
Привет всем, такая задача: в маткаде сделать слайдшоу из двух картинок. Эффект смены одной на...

Слайдшоу
Здравствуйте, подскажите как можно сделать подобное слайдшоу http://thewaltdisneycompany.com/ чтобы...

Слайдшоу
Ребят кто разбирается во флеше, мне надо сделать слайдшоу во флеше кому не трудно направте в нужном...

8
Эксперт JS
1347 / 656 / 295
Регистрация: 01.02.2019
Сообщений: 901
15.01.2021, 21:34 2
Vano1996,
Javascript
1
setInterval(() => plusSlides(1), 3000);
1
741 / 347 / 99
Регистрация: 04.10.2018
Сообщений: 545
15.01.2021, 21:44 3
Лучший ответ Сообщение было отмечено Vano1996 как решение

Решение

Привет Vano1996,

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

Javascript
1
2
3
4
5
6
7
8
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, привет =)
0
0 / 0 / 0
Регистрация: 22.12.2020
Сообщений: 44
15.01.2021, 22:08  [ТС] 4
Цитата Сообщение от web_coder2 Посмотреть сообщение
Привет Vano1996,

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

Javascript
1
2
3
4
5
6
7
8
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);
спасибо)
0
741 / 347 / 99
Регистрация: 04.10.2018
Сообщений: 545
15.01.2021, 22:51 5
Цитата Сообщение от Vano1996 Посмотреть сообщение
спасибо) все работает, но вот только слайдер не останавливается при наведении мыши. Не могли бы вы с этим помочь?
надо смотреть консоль, или выложите сюда весь код, может где то setInterval запускается повторно
0
0 / 0 / 0
Регистрация: 22.12.2020
Сообщений: 44
15.01.2021, 23:03  [ТС] 6
Цитата Сообщение от web_coder2 Посмотреть сообщение
надо смотреть консоль, или выложите сюда весь код, может где то setInterval запускается повторно
Выкладываю код
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
.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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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)
0
Эксперт JS
1347 / 656 / 295
Регистрация: 01.02.2019
Сообщений: 901
15.01.2021, 23:28 7
Лучший ответ Сообщение было отмечено Vano1996 как решение

Решение

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

Таким образом, вот правильный код:
Javascript
1
2
3
4
5
6
7
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, да, привет) Кстати, прикольная ава)

1
web_coder2
15.01.2021, 23:35
  #8

Не по теме:

Цитата Сообщение от Iverycool Посмотреть сообщение
web_coder2, да, привет) Кстати, прикольная ава)
Спасибо ^^

0
0 / 0 / 0
Регистрация: 22.12.2020
Сообщений: 44
15.01.2021, 23:42  [ТС] 9
Цитата Сообщение от Iverycool Посмотреть сообщение
Vano1996, тут две ошибки:
1. Вы не заменили "образный" селектор .slider-container на свой .slideshow-container
2. web_coder2 ошибся при записи навешивания обработчиков: mouseover вместо onmouseover

Таким образом, вот правильный код:
Javascript
1
2
3
4
5
6
7
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, да, привет) Кстати, прикольная ава)

Благодарочка)
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
15.01.2021, 23:42

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

слайдшоу
помогите как встаить слайдшоу на сайт чтобы фотки сами менялись через каждые 5 сек

Таймаут
Еще один глупый вопрос, не смейтесь ток :-[ есть прога Delphi, в ней по циклу выполняются...

Таймаут?
Доброго времени суток! Подскажите пожалуйста что использовать чтобы реализовать описанное ниже? ...

Слайдшоу в javascript
Нужно написать скрипт, который выводит слайдшоу, которое ездити по экрану взад-вперед и каждые 100...

отображение слайдшоу
У меня следующая проблема с отображением страницы со слайдшоу. Если я нажимаю на стрелочки, то все...

Динамическое слайдшоу
Доброго времени суток!!! Как сделать слайд шоу с динамическим добавлением картинок в него. ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.