Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.07.2016, 19:00
Интересующийся
Отправить личное сообщение для kolobku_xxx Посмотреть профиль Найти все сообщения от kolobku_xxx
 
Регистрация: 04.07.2016
Сообщений: 18

слайдер не работает
Здравствуйте, форумчане!
Немного переделала скрипт слайдера Как сделать свой слайдер на чистом js?
вот что имею
<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
<style>
#slider{
position: relative;
}
.slide{
position: absolute;
display: none;
}
.active{
  display: block;
}

</style>
<script>
 window.onload = function ()
{
  var imgs = document.querySelectorAll('.slide'), 
  		len = imgs.classList.length, 
  		i = 0;
  		
  (function go()
  {
  		if ( i<len)
  		{
	      imgs[i].classList.toggle('active');
	      imgs[++i].classList.toggle('active');
		   window.setTimeout(go, 1000);
	   }
	   else {
	   	i = 0;
	   	window.setTimeout(go, 1000);
	   }
  })()
}
</script>
</head>

<body>

<div id="slider">
<img src="http://javascript.ru/forum/images/smilies/smile.gif" class="slide">
<img src="http://javascript.ru/forum/images/smilies/cray.gif" class="slide">
<img src="http://javascript.ru/forum/images/smilies/dance3.gif" class="slide">
<img src="http://javascript.ru/forum/images/smilies/write.gif" class="slide">
</div>

</body>
</html>

ткните на строчку с ошибкой)

Последний раз редактировалось kolobku_xxx, 24.07.2016 в 19:03.
Ответить с цитированием
  #2 (permalink)  
Старый 24.07.2016, 19:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,052

kolobku_xxx,
28 строка должна быть перед 31 а в 31 не должно быть ++
Ответить с цитированием
  #3 (permalink)  
Старый 24.07.2016, 19:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,052

kolobku_xxx,
23 строка тоже неправильна
Ответить с цитированием
  #4 (permalink)  
Старый 24.07.2016, 19:22
Интересующийся
Отправить личное сообщение для kolobku_xxx Посмотреть профиль Найти все сообщения от kolobku_xxx
 
Регистрация: 04.07.2016
Сообщений: 18

дык 28 строчка перед 31
а как тогда перелистывать картинки, если не изменять индекс?
Ответить с цитированием
  #5 (permalink)  
Старый 24.07.2016, 19:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,052

kolobku_xxx, добавлен класс в первую картинку
<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
<style>
#slider{
position: relative;
}
.slide{
position: absolute;
display: none;
}
.active{
  display: block;
}

</style>
<script>
 window.onload = function ()
{
  var imgs = document.querySelectorAll('.slide'),
  		len = imgs.length,
  		i = 0;

  (function go()
  {
        imgs[i].classList.toggle('active');
        i++;
        if ( i == len) i = 0;
        imgs[i].classList.toggle('active');
        window.setTimeout(go, 1000);

  })()
}
</script>
</head>

<body>

<div id="slider">
<img src="http://javascript.ru/forum/images/smilies/smile.gif" class="slide active">
<img src="http://javascript.ru/forum/images/smilies/cray.gif" class="slide">
<img src="http://javascript.ru/forum/images/smilies/dance3.gif" class="slide">
<img src="http://javascript.ru/forum/images/smilies/write.gif" class="slide">
</div>

</body>
</html>
Ответить с цитированием
  #6 (permalink)  
Старый 24.07.2016, 19:29
Интересующийся
Отправить личное сообщение для kolobku_xxx Посмотреть профиль Найти все сообщения от kolobku_xxx
 
Регистрация: 04.07.2016
Сообщений: 18

спасибо, рони
Ответить с цитированием
  #7 (permalink)  
Старый 24.07.2016, 19:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,052

kolobku_xxx,
вариант без дополнительного класса в первой картинке
<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
<style>
#slider{
position: relative;
}
.slide{
position: absolute;
display: none;
}
.active{
  display: block;
}

</style>
<script>
 window.onload = function ()
{
  var imgs = document.querySelectorAll('.slide'),
  		len = imgs.length,
  		i = len - 1;

  (function go()
  {
        imgs[i].classList.remove('active');
        i++;
        if ( i == len) i = 0;
        imgs[i].classList.add('active');
        window.setTimeout(go, 1000);

  })()
}
</script>
</head>

<body>

<div id="slider">
<img src="http://javascript.ru/forum/images/smilies/smile.gif" class="slide">
<img src="http://javascript.ru/forum/images/smilies/cray.gif" class="slide">
<img src="http://javascript.ru/forum/images/smilies/dance3.gif" class="slide">
<img src="http://javascript.ru/forum/images/smilies/write.gif" class="slide">
</div>

</body>
</html>
Ответить с цитированием
  #8 (permalink)  
Старый 24.07.2016, 23:24
Интересующийся
Отправить личное сообщение для kolobku_xxx Посмотреть профиль Найти все сообщения от kolobku_xxx
 
Регистрация: 04.07.2016
Сообщений: 18

эксперимент показал, если не удалить присвоенный активный класс последнему изображению(как в последнем варианте) или вручную не дописать первой картинке класс актив(первый вариант рони), получишь эффект наложения двух картинок
Спасибо, рони

Последний раз редактировалось kolobku_xxx, 24.07.2016 в 23:49.
Ответить с цитированием
  #9 (permalink)  
Старый 24.07.2016, 23:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,052

Сообщение от kolobku_xxx
получишь эффект наложения двух картинок
не понял о чём вы
Ответить с цитированием
  #10 (permalink)  
Старый 24.07.2016, 23:44
Интересующийся
Отправить личное сообщение для kolobku_xxx Посмотреть профиль Найти все сообщения от kolobku_xxx
 
Регистрация: 04.07.2016
Сообщений: 18

удалила класс АКТИВ с первой картинки
<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
<style>
#slider{
position: relative;
}
.slide{
position: absolute;
display: none;
}
.active{
  display: block;
}

</style>
<script>
 window.onload = function ()
{
  var imgs = document.querySelectorAll('.slide'),
  		len = imgs.length,
  		i = 0;

  (function go()
  {
        imgs[i].classList.toggle('active');
        i++;
        if ( i == len) i = 0;
        imgs[i].classList.toggle('active');
        window.setTimeout(go, 1000);

  })()
}
</script>
</head>

<body>

<div id="slider">
<img src="http://javascript.ru/forum/images/smilies/smile.gif" class="slide">
<img src="http://javascript.ru/forum/images/smilies/cray.gif" class="slide">
<img src="http://javascript.ru/forum/images/smilies/dance3.gif" class="slide">
<img src="http://javascript.ru/forum/images/smilies/write.gif" class="slide">
</div>

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



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
AddEventListener не правильно работает с классами Flakky Events/DOM/Window 2 27.05.2016 14:51
Не работает всплывающая форма на второстепенных страницах denjer Javascript под браузер 0 22.04.2016 22:30
Слайдер не работает дальше второй картинки kamlayka Элементы интерфейса 1 11.03.2016 14:58
jQyery функция странно работает! Midel Общие вопросы Javascript 4 08.04.2012 13:40
Не работает слайдер NeoMurderer jQuery 6 12.11.2011 20:37