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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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