ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Слайдер картинок на JS без jquery
7 сообщений из 7, страница 1 из 1
Слайдер картинок на JS без jquery
    #39177753
trs160390
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
trs160390
Гость
Доброго времени суток! Есть вот такой код HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Document</title>
</head>
<body>
<div class="wrapper" id="slider">
<div class="inner">
<div class="str" onClick="next('1')"><img src="strelka1.png" class="strel"></div>
<div class="str1" onClick="next('2')"><img src="strelka.png" class="strel"></div>
<div id="slider">

<div class="kartinka" style="background-image:url(1.jpg); display: none" id="first"></div>
<div class="kartinka" style="background-image:url(2.jpg)" id="second"></div>
<div class="kartinka" style="background-image:url(3.jpg)" id="therd"></div>
<div class="kartinka" style="background-image:url(4.jpg)" id="fourth"></div>
<div class="kartinka" style="background-image:url(5.jpg)" id="fifth"></div>

</div>
</div>
</div>
</body>
<script type="text/javascript" src="app.js"></script>
</body>
</html>

Так вот, может ли кто-нибудь подсказать как сделать слайдер картинок (нажимая на клавиатуре кнопки влево, вправо)используя JS, с использованием свойства видимости картинки style.display="block"? Нашел очень много примеров, но все они сделаны при помощи массива, а хотелось бы разобраться как данную задачку решить другим путем. Заранее спасибо.
...
Рейтинг: 0 / 0
24.02.2016, 14:23
| Ответить | Цитировать | Написать  
Слайдер картинок на JS без jquery
    #39177833
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
trs160390может ли кто-нибудь подсказать как сделать слайдер картинок (нажимая на клавиатуре кнопки влево, вправо)используя JS, с использованием свойства видимости картинки style.display="block"?
Алгоритм примерно такой:
- Делаешь крайний блок невидимым
- Вставляешь его в материнский блок с другой стороны
- Опять делаешь его видимым

Делать блок невидимым можно некой анимацией, так будет больше визуальных эффектов его перелистывания...
...
Рейтинг: 0 / 0
24.02.2016, 15:05
| Ответить | Цитировать | Написать  
Слайдер картинок на JS без jquery
    #39177838
trs160390
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
trs160390
Гость
Хорошо, а как правильно обратиться в данном случае к картинке в JS?
...
Рейтинг: 0 / 0
24.02.2016, 15:07
| Ответить | Цитировать | Написать  
Слайдер картинок на JS без jquery
    #39177849
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
trs160390Хорошо, а как правильно обратиться в данном случае к картинке в JS?
У тебя есть материнский элемент с ИД slider ... У него есть дочерние элементы с классом kartinka - вот с этим и работай...
...
Рейтинг: 0 / 0
24.02.2016, 15:12
| Ответить | Цитировать | Написать  
Слайдер картинок на JS без jquery
    #39178150
trs160390
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
trs160390
Гость
Пытаюсь разобраться, вот опять же по примерам, надыбал следующее:
script:
var d=document;
var keyCode=0;
d.addEventListener("keydown",choise);

function choise(e)
{
keyCode=e.keyCode;

switch (keyCode)
{
case 37:
for (var i=0;i<d.getElementById("slider").childNodes.length;i++)
d.getElementById("slider").childNodes[i].style.display = "block";

break;

case 39:

break;
}
}


html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Document</title>
</head>
<body>
<div class="wrapper" id="slider">
<div class="inner">
<div class="str" onClick="openMenu"><img src="strelka1.png" class="strel"></div>
<div class="str1" onClick="openMenu"><img src="strelka.png" class="strel"></div>
<div id="slider">

<div class="kartinka" style="background-image:url(1.jpg); display: 'none';" </div>
<div class="kartinka" style="background-image:url(2.jpg); display: 'none';" </div>
<div class="kartinka" style="background-image:url(3.jpg); display: 'none';" </div>
<div class="kartinka" style="background-image:url(4.jpg); display: 'none';" </div>
<div class="kartinka" style="background-image:url(5.jpg); display: 'none';" </div>

</div>
</div>
</div>
</body>
<script type="text/javascript" src="app.js"></script>
</body>
</html>

Но при нажатии на кнопку влево, выдается следующая ошибка: Uncaught TypeError: Cannot set property 'display' of undefined.
Что я не так делаю??
...
Рейтинг: 0 / 0
24.02.2016, 20:29
| Ответить | Цитировать | Написать  
Слайдер картинок на JS без jquery
    #39178236
trs160390
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
trs160390
Гость
Так, вот то что получилось в итоге. Кажется все работает))) Может кому пригодится....

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href=" https://necolas.github.io/normalize.css/3.0.2/normalize.css">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<div class="inner">
<div class="str" onclick="previous()"><img src="strelka1.png" class="strel"></div>
<div class="str1" onclick="next()"><img src="strelka.png" class="strel"></div>
<div id="slider">

<div class="kartinka" style="background-image:url(1.jpg); display: block;" ></div>
<div class="kartinka" style="background-image:url(2.jpg); display: none;" ></div>
<div class="kartinka" style="background-image:url(3.jpg); display: none;" ></div>
<div class="kartinka" style="background-image:url(4.jpg); display: none;" ></div>
<div class="kartinka" style="background-image:url(5.jpg); display: none;" ></div>

</div>
<div class="kol">
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="app.js"></script>
</body>
</html>

JS:

var d=document;
var keyCode=0;
var per=d.getElementsByClassName("kartinka");
var num=0;
var per1=d.getElementsByClassName("point");
per1[0].style.backgroundColor="white";

d.addEventListener("keydown",choise);

function previous()
{
per[num].style.display="none";
per1[num].style.backgroundColor="rgba(179, 174, 174, 0.82)";
if (num!=0 && num>0)
{
num=num-1;

}
else
{
num=0;
}
displ(num);
}
function next(){
per[num].style.display="none";
per1[num].style.backgroundColor="rgba(179, 174, 174, 0.82)";
if (num>=(per.length-1))
{
num=(per.length-1);
}
else
{
num=num+1;
}
displ(num);
}

function choise(e)
{
keyCode=e.keyCode;

switch (keyCode)
{
case 37:
previous();
break;

case 39:
next();
break;

}

}

function displ(number)
{
per[number].style.display="block";
per1[num].style.backgroundColor="white";
}
...
Рейтинг: 0 / 0
25.02.2016, 00:02
| Ответить | Цитировать | Написать  
Слайдер картинок на JS без jquery
    #39178317
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
trs160390Может кому пригодится....
На Хабре статейку запили.
...
Рейтинг: 0 / 0
25.02.2016, 08:14
| Ответить | Цитировать | Написать  
7 сообщений из 7, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Слайдер картинок на JS без jquery
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]