Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.05.2015, 01:04
Аватар для Alexander Belov
Профессор
Отправить личное сообщение для Alexander Belov Посмотреть профиль Найти все сообщения от Alexander Belov
 
Регистрация: 12.03.2015
Сообщений: 173

Raw JS slider
Подскажите, пожалуйста, как реализовать примитивный слайдер.
Есть несколько div class = "slider" По умолчанию они не видны, нужно каждому по очереди через 10 секунд присваивать class = "visible" (элемент с таким классом будет отображаться). Естественно, среди всех div class = "slider" только у одного div должен быть class = "visible"

Пока есть следующее:
var slider1 = document.getElementById('slider1'),
	slider2 = document.getElementById('slider2'),
    slider3 = document.getElementById('slider3'),
	slider4 = document.getElementById('slider4');	

	var elements = document.getElementsByClassName('slider');

	for (var i = 0; i < elements.length; i++) {

	}


Не понимаю, как "перебирать" каждый div и сразу проверять его на наличие class = "visible", и если такой class есть, то ОК, а если нет, то назначаем, предварительно убрав у того div, у которого такой class = "visible" присутствует в данный момент.

Пробовал замыканиями - не вышло ничего. Может быть, есть более простой способ реализовать такой слайдер (на чистом JS)?
Ответить с цитированием
  #2 (permalink)  
Старый 26.05.2015, 01:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,970

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>
Ответить с цитированием
  #3 (permalink)  
Старый 26.05.2015, 15:31
Аватар для Alexander Belov
Профессор
Отправить личное сообщение для Alexander Belov Посмотреть профиль Найти все сообщения от Alexander Belov
 
Регистрация: 12.03.2015
Сообщений: 173

Благодарю! Прокомментируйте, пожалуйста, принцип выполнения кода на 30 строке. Не понятно, зачем там модуль числа используется.
Ответить с цитированием
  #4 (permalink)  
Старый 26.05.2015, 15:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,970

Alexander Belov,
чтоб indx невырастал больше числа элементов
<script>
for (var i=0, indx = 4 ; i<50; i++)  {document.write(++indx % 5 + " ")}
</script>
Ответить с цитированием
  #5 (permalink)  
Старый 26.05.2015, 15:43
Аватар для Alexander Belov
Профессор
Отправить личное сообщение для Alexander Belov Посмотреть профиль Найти все сообщения от Alexander Belov
 
Регистрация: 12.03.2015
Сообщений: 173

Понятно, спасибо!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Операционная Система на JS Icat Общие вопросы Javascript 3 17.04.2018 22:54
Вывыод контента через JS inet_boy Элементы интерфейса 0 18.11.2013 01:00
Вставка кода js с помощью js Alice Общие вопросы Javascript 1 12.06.2013 18:05
Сделать JS - slider tuzhilkin Работа 2 14.09.2011 15:26