|
|
24.07.2016, 18:00
|
|
Интересующийся
|
|
Регистрация: 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 в 18:03.
|
|
24.07.2016, 18:13
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,108
|
|
|
kolobku_xxx,
28 строка должна быть перед 31 а в 31 не должно быть ++
|
|
24.07.2016, 18:22
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,108
|
|
|
kolobku_xxx,
23 строка тоже неправильна
|
|
24.07.2016, 18:22
|
|
Интересующийся
|
|
Регистрация: 04.07.2016
Сообщений: 18
|
|
дык 28 строчка перед 31 
а как тогда перелистывать картинки, если не изменять индекс? |
|
24.07.2016, 18:23
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,108
|
|
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>
|
|
24.07.2016, 18:29
|
|
Интересующийся
|
|
Регистрация: 04.07.2016
Сообщений: 18
|
|
|
спасибо, рони
|
|
24.07.2016, 18:34
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,108
|
|
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>
|
|
24.07.2016, 22:24
|
|
Интересующийся
|
|
Регистрация: 04.07.2016
Сообщений: 18
|
|
эксперимент показал, если не удалить присвоенный активный класс последнему изображению(как в последнем варианте) или вручную не дописать первой картинке класс актив(первый вариант рони), получишь эффект наложения двух картинок
Спасибо, рони
Последний раз редактировалось kolobku_xxx, 24.07.2016 в 22:49.
|
|
24.07.2016, 22:35
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,108
|
|
|
Сообщение от kolobku_xxx
|
|
получишь эффект наложения двух картинок
|
не понял о чём вы |
|
24.07.2016, 22:44
|
|
Интересующийся
|
|
Регистрация: 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>
|
|
|
|
