слайдер не работает
Здравствуйте, форумчане!
Немного переделала скрипт слайдера 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> ткните на строчку с ошибкой) |
kolobku_xxx,
28 строка должна быть перед 31 а в 31 не должно быть ++ |
kolobku_xxx,
23 строка тоже неправильна |
дык 28 строчка перед 31 :)
а как тогда перелистывать картинки, если не изменять индекс? |
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,
вариант без дополнительного класса в первой картинке <!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> |
эксперимент показал, если не удалить присвоенный активный класс последнему изображению(как в последнем варианте) или вручную не дописать первой картинке класс актив(первый вариант рони), получишь эффект наложения двух картинок :)
Спасибо, рони |
Цитата:
|
удалила класс АКТИВ с первой картинки
<!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> |
Часовой пояс GMT +3, время: 12:23. |