Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   слайдер не работает (https://javascript.ru/forum/events/64177-slajjder-ne-rabotaet.html)

kolobku_xxx 24.07.2016 18:00
слайдер не работает
 
Здравствуйте, форумчане!
Немного переделала скрипт слайдера http://javascript.ru/forum/dom-windo...histom-js.html
вот что имею
<!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>

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

рони 24.07.2016 18:13
kolobku_xxx,
28 строка должна быть перед 31 а в 31 не должно быть ++

рони 24.07.2016 18:22
kolobku_xxx,
23 строка тоже неправильна

kolobku_xxx 24.07.2016 18:22
дык 28 строчка перед 31 :)
а как тогда перелистывать картинки, если не изменять индекс?

рони 24.07.2016 18:23
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>

kolobku_xxx 24.07.2016 18:29
спасибо, рони

рони 24.07.2016 18:34
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>

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

рони 24.07.2016 22:35
Цитата:
Сообщение от kolobku_xxx
получишь эффект наложения двух картинок
не понял о чём вы

kolobku_xxx 24.07.2016 22:44
удалила класс АКТИВ с первой картинки
<!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>

рони 24.07.2016 22:49
Цитата:
Сообщение от kolobku_xxx
удалила класс АКТИВ с первой картинки
так возьмите код из 7 поста

рони 24.07.2016 22:53
kolobku_xxx,
не понимаю оба моих примера без всяких наложений , зачем их делать нерабочими ...

kolobku_xxx 24.07.2016 22:57
оба варианта опробовала.
я намеренно удалила класс, работа цикла стала еще очевиднее :thanks:

рони 24.07.2016 23:00
рони,
ок


Часовой пояс GMT +3, время: 11:36.