Плавная циклическая замена одного блока другим. Как сделать?

Здравствуйте, прошу натолкнуть на мысль, как реализовать изложенное в вопросе. На странице есть несколько блоков с одним и тем же классом и разным контентом:
<div class="block">Content 1</div>
<div class="block">Content 2</div>
...
<div class="block">Content n</div>

Необходимо, чтобы на странице выводился только один блок - каждый по очереди, сначала первый, через 10 сек второй и т.д. Когда блоки заканчиваются, цикл возвращается к первому блоку и всё по новой. Причем вывод каждого следующего блока должен осуществляться плавно, как бы "проявляясь".
Логика у меня была такая, что весь массив этих блоков нужно прогнать через цикл, и одному блоку присваивается display:block, а остальным - display:none. Через 10 сек block присваивается второму, а none - первому и т.д. Так вот, прошу подсказать, как такую махинацию провернуть? На чистом JS или на jQuery - неважно. Не могу сообразить...
  • Вопрос задан
  • 713 просмотров
Решения вопроса 1
svistiboshka
@svistiboshka
живые веб интерфейсы
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@kapitan7830
Можно так, например, https://jsfiddle.net/n20sbtw4/
Главное, чтобы высота родительского блока была задана, или, чтобы блоки имели абсолютное позиционирование, иначе контент под ними будет "скакать"
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы