Форум

sashka7onoff · #1 (**permalink**) 14.05.2014, 19:21

Хочу сделать свой слайдер и передо мной стоит вроде бы несложная задача, но я уже всю голову сломал, помогите знающие люди!
Итак задача: Есть блок div с position:relative и в нем 4 изображения с position:absolute, таким образом изображения находятся в одном месте друг под другом, у всех изображений кроме одного display:none. Я хочу меняя свойство display у изображений с none на block циклически показывать по одному изображению через равные промежутки времени, как это сделать? с циклами и setInterval и setTimeout у меня что-то ничего дельного не вышло

рони · #2 (**permalink**) 14.05.2014, 19:35

sashka7onoff,
где код? и поиск по форуму используйте

sashka7onoff · #3 (**permalink**) 14.05.2014, 23:37

Вот код:

<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 у изображений так, чтобы в слайдере менялись картинки безо всякий эффектов, и чтобы после показа последнего слайда все циклически повторялось

Sweet · #4 (**permalink**) 14.05.2014, 23:57

Сообщение от sashka7onoff

Вот код

Это верстка, бро. Где код?

рони · #5 (**permalink**) 15.05.2014, 00:07

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>

icehummer · #6 (**permalink**) 15.05.2014, 03:39

Вот слайдер сам собирал
Помогите с removeChild, что то происходит вдруг не так
Только нужно всего добавить к Body onload="rep"

BETEPAH · #7 (**permalink**) 15.05.2014, 10:55

Сообщение от рони

.classList

IE10+ (на всякий случай)

рони · #8 (**permalink**) 09.07.2017, 20:58

amigru,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

amigru · #9 (**permalink**) 09.07.2017, 21:01

Здравствуйте! Помогите понять, что делаю не так (по жизни знаю,но относительно кода-нет) На учебе дали задание сделать "простой" сладер в 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>

laimas · #10 (**permalink**) 10.07.2017, 05:28

Сообщение от amigru

и даже ссылку дали

И что трудности "списать"? А списываете вы и с ошибками, и куча отсебятины в CSS, HTML, и полной бессмыслицы в JS.

Форум

Справочник

Discord чат

Курсы javascript