Тема: Raw JS slider
Показать сообщение отдельно
  #2 (permalink)  
Старый 26.05.2015, 01:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Alexander Belov,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
 .slider{
   display: none;
 }
 .slider.visible{
   display: block;
 }

  </style>
</head>

<body>
<div class="slider">1</div>
<div class="slider">2</div>
<div class="slider">3</div>
<div class="slider">4</div>
<div class="slider">5</div>
<script>
  var items =  document.querySelectorAll(".slider"), len = items.length, indx = len-1;
  (function foo()
  {
     items[indx].classList.remove("visible");
     indx = ++indx % len;
     items[indx].classList.add("visible");
     window.setTimeout(foo, 300)
  })()
</script>
</body>

</html>
Ответить с цитированием