Показать сообщение отдельно
  #3 (permalink)  
Старый 26.12.2017, 19:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

как устроены слайдеры (бесконечный цикл в обе стороны)
Sinevik,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    article{
      position: absolute;
      height: 100px;
      width: 100px;
      background-color: #FFFFFF;
    }
    div {
      position: relative;
    }

  </style>


</head>

<body>
<input name="" type="button" value="prev" onclick="prev()"> <input name="" type="button" value="next" onclick="next()">
<div>
<article style="z-index: 10">1</article>
<article>2</article>
<article>3</article>
<article>4</article>
<article>5</article>
</div>

 <script>
var slider = document.getElementsByTagName("article");
var index = 0;
function next()
{
   slider[index].style.zIndex = 1;
   index = ++index % slider.length;
   slider[index].style.zIndex = 10;
}

function prev()
{
   slider[index].style.zIndex = 1;
   --index < 0 && (index = slider.length - 1);
   slider[index].style.zIndex = 10;
}
  </script>
</body>
</html>
Ответить с цитированием