1

Здравствуйте. На странице есть блоки

.slider1 {
  display: block
}

.slider2 {
  display: none
}

.slider3 {
  display: none
}
<div class="slider1">Информация блока 1</div>
<div class="slider2">Информация блока 2</div>
<div class="slider3">Информация блока 3</div>

Каким образом можно менять значение блоков, чтобы каждые 5 секунд показывался следующий блок, а предыдущий скрывался, и так циклично.

Буду благодарен за любую полезную информацию.

2
  • Таймеры уже не в моде?
    – user207618
    13 ноя 2016 в 11:18
  • С javascript не очень... мне бы какой нибудь пример
    – iKey
    13 ноя 2016 в 11:19

3 ответа 3

4

var elements = document.querySelectorAll('.sliders');

var counter = 1;
setInterval(function(){  
  for (var i = 0; i < elements.length; ++i) {
    elements[i].style.display = 'none';
  }
  if (counter > elements.length - 1)
    counter = 0;
  
  elements[counter].style.display = 'block';
  counter++;      
}, 1000);
.slider1 {
  display: block
}

.slider2 {
  display: none
}

.slider3 {
  display: none
}
<div class="slider1 sliders">Информация блока 1</div>
<div class="slider2 sliders">Информация блока 2</div>
<div class="slider3 sliders">Информация блока 3</div>

setInterval имеет синтаксис setTimeout(func / code, delay[, arg1, arg2...]), где

func/code - Функция или строка кода для исполнения.

delay - Задержка в милисекундах, 1000 милисекунд равны 1 секунде.

arg1, arg2… - Аргументы, которые нужно передать функции.


Тут мы находим все элементы, с которыми надо манипулировать.

  • На каждой итерации счетчика мы скрываем все блоки и отображаем только один конкретный.
  • Увеличиваем счетчик.
  • Повторяем процедуру снова (точнее это делаем таймер).
  • Если счетчик превышает количество элементов - сбрасываем его.
5
  • С интервалом можно напороться на разные накладки и глюки, печаль.
    – user207618
    13 ноя 2016 в 11:40
  • @Other так же, как и с таймаутом, собственно 13 ноя 2016 в 11:41
  • 1
    Таймаут хотя бы гарантирует что между интервалами будет минимум N. Интервал же чуть затормози и глюки снежным комом нарастут.
    – user207618
    13 ноя 2016 в 11:43
  • @Other да еще если пользователь сидит на IE6, да еще и прямиком из 2005 года.... Ужас, ужас, что творится. 13 ноя 2016 в 11:57
  • 1
    Современные браузеры тоже могут сильно виснуть :)
    – user207618
    13 ноя 2016 в 11:59
2

Легко и просто:

let msgs = [document.querySelector('.slider1'), document.querySelector('.slider2'), document.querySelector('.slider3')],
  last = null;

const slider = n => {
  if(last)
    last.style.display = 'none';
  
  if(n >= msgs.length)
    n = 0;
  
  last = msgs[n];
  last.style.display = 'block';
  setTimeout(_ => slider(++n), 1000);
}

slider(0);
.slider1 {
  display: block
}

.slider2 {
  display: none
}

.slider3 {
  display: none
}
<div class="slider1">Информация блока 1</div>
<div class="slider2">Информация блока 2</div>
<div class="slider3">Информация блока 3</div>

2
  • 1
    Вы прочитали С javascript не очень...? Может как-то попроще напишете, без вот этих вот ES6?
    – u_mulder
    13 ноя 2016 в 11:32
  • @u_mulder, если нужно готовое решение - тут не фриланс. Это же помощь.
    – user207618
    13 ноя 2016 в 11:34
0

CSS анимация не может анимировать display: none;, но можно поробовать такой хак. Совместимость: IE 10+

Пример

.slider_1 {
  animation: seconds 15.0s forwards infinite;
  animation-delay: 0s;
  position: absolute;
  background: red;
  opacity: 0;
  left: -9999px;
}

.slider_2 {
  animation: seconds 15.0s forwards infinite;
  animation-delay: 5s;
  position: absolute;
  background: green;
  opacity: 0;
  left: -9999px;
}

.slider_3 {
  animation: seconds 15.0s forwards infinite;
  animation-delay: 10s;
  position: absolute;
  background: blue;
  opacity: 0;
  left: -9999px;
}

@keyframes seconds {
  0% {
    opacity: 1;
    left: 0; 
  }
  33.99% {
    opacity: 1;
    left: 0; 
  }
  34% {
    opacity: 0;
    left: -9999px; 
  }
}
<div class="slider_1">Первый элемент</div>
<div class="slider_2">Второй элемент</div>
<div class="slider_3">Третий элемент</div>


Я посмотрел, что с javascript не очень, и решил, что речь идёт о чистом CSS :P Немного не так понял вопрос, но всё равно считаю, что такое решение имеет право на существование.

1
  • Дети, а давайте представим что у нас 1999 слайдов!
    – user207618
    13 ноя 2016 в 11:46

Ваш ответ

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

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