Как сделать свой слайдер на чистом js?
Хочу сделать свой слайдер и передо мной стоит вроде бы несложная задача, но я уже всю голову сломал, помогите знающие люди!
Итак задача: Есть блок div с position:relative и в нем 4 изображения с position:absolute, таким образом изображения находятся в одном месте друг под другом, у всех изображений кроме одного display:none. Я хочу меняя свойство display у изображений с none на block циклически показывать по одному изображению через равные промежутки времени, как это сделать? с циклами и setInterval и setTimeout у меня что-то ничего дельного не вышло :( |
sashka7onoff,
где код? и поиск по форуму используйте |
Вот код:
<style>
#slider{
position: relative;
}
.slide{
position: absolute;
display: none;
}
</style>
<div id="slider">
<img src="slide1.jpg" class="slide" style="display: block">
<img src="slide2.jpg" class="slide">
<img src="slide3.jpg" class="slide">
<img src="slide4.jpg" class="slide">
</div>
Задача через равные промежутки времени менять свойство display у изображений так, чтобы в слайдере менялись картинки безо всякий эффектов, и чтобы после показа последнего слайда все циклически повторялось |
Цитата:
|
sashka7onoff,
:-?
<!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 = ++i % len;
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>
|
Вот слайдер сам собирал
http://javascript.ru/forum/dom-windo...ug-ne-tak.html Только нужно всего добавить к Body onload="rep" |
Цитата:
|
amigru,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Здравствуйте! Помогите понять, что делаю не так (по жизни знаю,но относительно кода-нет) На учебе дали задание сделать "простой" сладер в js и даже ссылку дали, https://gist.github.com/cythux/8146948
может где-то не так ставлю кавычки? бьюсь уже второй день, что не так
var counter = 0;
items = document.querySelectorAll('.diy-slideshow .show');
var prev=document.querySelector('.prev .diy-slideshow');
var next=document.querySelector('.next .diy-slideshow');
prev.onclick= function(){
items[counter].style.display='none';
counter= counter-1;
if (counter<0) {
counter=items.length -1;
} }
next.onclick=function () {
items[counter].style.display='none';
counter=counter+1;
if (counter>=items.length){
counter=1;}
<div class="diy-slideshow"> <figure class="show"> <img src="images/gallery/sea1.jpg" width="850" height="auto"><div class="description">Tortoise in the sea</div> </figure> <figure><img src="images/gallery/sea2.jpg" width="850" height="auto"><div class="description">Seashells</div> </figure> <figure><img src="images/gallery/beach.jpg" width="850" height="auto"><div class="description">Beatiful beach</div> </figure> <figure><img src="images/gallery/sunrise.jpg" width="850" height="auto"><div class="description">Wonderful sunrice</div> </figure> <figure><img src="images/gallery/bollard.jpg" width="850" height="auto"><div class="description">Quay</div> </figure> <figure><img src="images/gallery/lake.jpg" width="850" height="auto"><div class="description">Amazing sunrice on the lake</div> </figure></div> <span class="prev"> <<</span> <span class="next"> >></span> |
Цитата:
|
Да, к сожалению трудно. Если не было так трудно, не просила бы помощи. И я попросила помощи и помочь найти ошибку и указать на нее, а не слушать, что там ошибка. В случае отсутствия ошибки все бы работало. На том сайте часть классов идет со знаками доллара. Даже скопировав все так как есть в трех файлах, оно не заработало. Я этим занимаюсь месяц и мне сложно понять работу скрипта.
|
Цитата:
Потом как вы пытаетесь получить кнопки управления? Они у вас с классами "prev" и "next", а вы хотите достучаться к ним по селекторам querySelector('.prev .diy-slideshow') и querySelector('.next .diy-slideshow') соответственно, а это означает найти в элементах классов "prev" и "next" элементы с классом "diy-slideshow". Ну разве такие есть у вас? Параметры методов querySelector/querySelectorAll описываются согласно CSS селекторам, надо было просто прочесть об этом. Ничего сложного в этом нет. Есть символы, которые нельзя как есть вставлять в HTML, это < > &, иначе могут быть неприятности, их обязательно заменяют html-сущностями. Но самое главное, это не понять чего же вам надо? Если вам дали ссылку, то для чего - разрешено списать код заменив слегка имена переменных или руководствуясь кодом написать свое? Ну если свое, то можно и так написать:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
figure {
width: 400px;
background-color: #000;
text-align: center;
padding: 15px;
margin: 0 auto 5px auto;
color: #fff;
}
figure:not(.show) {
display: none;
}
figure img {
height: 200px;
width: auto;
}
.control {
width: 430px;
margin: 0 auto;
}
.control span {
font-size: 1.5em;
cursor: pointer;
}
.control span:last-child {
float: right;
}
</style>
</head>
<body>
<div class="diy-slideshow">
<figure class="show">
<img src="https://cdn.pixabay.com/photo/2017/06/21/13/37/lizard-2427248__340.jpg"><div class="description">Tortoise in the sea</div>
</figure>
<figure>
<img src="https://cdn.pixabay.com/photo/2017/06/26/12/49/red-wine-2443699__340.jpg"><div class="description">Seashells</div>
</figure>
<figure>
<img src="https://cdn.pixabay.com/photo/2017/06/24/23/03/railway-2439189__340.jpg"><div class="description">Beatiful beach</div>
</figure>
<figure>
<img src="https://cdn.pixabay.com/photo/2017/06/30/21/28/sunset-2459855__340.jpg"><div class="description">Wonderful sunrice</div>
</figure>
<figure>
<img src="https://cdn.pixabay.com/photo/2017/06/24/23/41/beer-2439237__340.jpg"><div class="description">Quay</div>
</figure>
<figure>
<img src="https://cdn.pixabay.com/photo/2016/03/09/15/29/eagle-1246681__340.jpg"><div class="description">Amazing sunrice on the lake</div>
</figure>
</div>
<div class="control">
<span data-direct="-1">«</span>
<span data-direct="1">»</span>
</div>
<script>
var counter = 0,
items = document.querySelectorAll('.diy-slideshow figure');
[].forEach.call(document.querySelectorAll('div.control span'), function(e) {
e.addEventListener('click', function() {
items[counter].classList.remove('show');
counter += +this.getAttribute('data-direct');
counter = counter < 0 ? items.length - 1 : counter == items.length ? 0 : counter;
items[counter].classList.add('show');
}, false);
});
</script>
</body>
</html>
Мадам, вы студент, значит надо учиться или вам задают то, чего в программе обучения вообще нет? :) |
Спасибо огромное! Вечером попытаюсь разобраться. Программу прохожу по вебинару,html,css объяснили (так, что остальное смогла понять через интернет), а вот JS объяснили плохо. А проект дали: создать свою веб страницу (внутри еще 5 страниц). Одна страница вообще неполучилась (разницу между removeListener и switch непонятна (нужно чтобы в случае когда мышка на объекте менялся текст на другой,а вслучае когда ее там нет оставался текст который изначально и это требуеться сделать именно через JS, хоть через CSS это у меня получается) надеюсь препод не забьет и объяснит хоть когда-нибудь). :( .
В ссылке которую дали, функции которых вообще не было на курсе. А остальное пыталась понять через обучалку https://www.youtube.com/watch?v=-2WiaSvOj78&t=4842s В итоге у меня куча картинок вертикально. Если бы с той ссылки все работало как надо, то я бы была рада. С кодом по ссылке в console.log подсвечивает красным после второй функции красным, пишет что такой функции нет (это я напоминаю,я скопировала все прямиком с сайта). На W3 сайте слайдеры вообще не понятные для моего разума. Спасибо еще раз. |
amigru,
хотите научится вязать спицами (если не можете)? Тогда можно смотреть мультики на ютюбе. ;) А изучать веб аспекты программирования лучше по книгам хорошим или в "твердом переплете" (если прилагаются CD с примерами/проектами вообще шик), или онлайн: https://developer.mozilla.org/ru/ https://developer.mozilla.org/ru/docs/Learn https://developer.mozilla.org/ru/doc...d_with_the_web https://developer.mozilla.org/ru/docs/Learn/HTML https://developer.mozilla.org/ru/docs/Learn/CSS https://developer.mozilla.org/ru/docs/Learn/JavaScript Учебник по JS есть и на форуме, не полный конечно, но и "не сухим языком" написан. |
Я нашла причину своих неудачь. Код скрипта был в начале, причем в head (остальные страницы работают так ), а не в конце перед /body, поняла это по командам в console.log.
Насчет querySelector и взаимодействий с CSS на курсе не было сказано,спасибо за разъяснение. На курсе также плохо объяснили способ external, так как показывали только internal. Еще раз спасибо за помощь, буду дальше разбираться с addListener :) |
Цитата:
|
| Часовой пояс GMT +3, время: 08:52. |