Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.05.2014, 19:21
Новичок на форуме
Отправить личное сообщение для sashka7onoff Посмотреть профиль Найти все сообщения от sashka7onoff
 
Регистрация: 14.05.2014
Сообщений: 2

Как сделать свой слайдер на чистом js?
Хочу сделать свой слайдер и передо мной стоит вроде бы несложная задача, но я уже всю голову сломал, помогите знающие люди!
Итак задача: Есть блок div с position:relative и в нем 4 изображения с position:absolute, таким образом изображения находятся в одном месте друг под другом, у всех изображений кроме одного display:none. Я хочу меняя свойство display у изображений с none на block циклически показывать по одному изображению через равные промежутки времени, как это сделать? с циклами и setInterval и setTimeout у меня что-то ничего дельного не вышло
Ответить с цитированием
  #2 (permalink)  
Старый 14.05.2014, 19:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,116

sashka7onoff,
где код? и поиск по форуму используйте
Ответить с цитированием
  #3 (permalink)  
Старый 14.05.2014, 23:37
Новичок на форуме
Отправить личное сообщение для sashka7onoff Посмотреть профиль Найти все сообщения от sashka7onoff
 
Регистрация: 14.05.2014
Сообщений: 2

Вот код:
<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 у изображений так, чтобы в слайдере менялись картинки безо всякий эффектов, и чтобы после показа последнего слайда все циклически повторялось
Ответить с цитированием
  #4 (permalink)  
Старый 14.05.2014, 23:57
Профессор
Отправить личное сообщение для Sweet Посмотреть профиль Найти все сообщения от Sweet
 
Регистрация: 16.03.2010
Сообщений: 1,618

Сообщение от sashka7onoff
Вот код
Это верстка, бро. Где код?
Ответить с цитированием
  #5 (permalink)  
Старый 15.05.2014, 00:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,116

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>
Ответить с цитированием
  #6 (permalink)  
Старый 15.05.2014, 03:39
Интересующийся
Отправить личное сообщение для icehummer Посмотреть профиль Найти все сообщения от icehummer
 
Регистрация: 08.05.2014
Сообщений: 10

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

Последний раз редактировалось icehummer, 15.05.2014 в 03:43.
Ответить с цитированием
  #7 (permalink)  
Старый 15.05.2014, 10:55
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

Сообщение от рони
.classList
IE10+ (на всякий случай)
Ответить с цитированием
  #8 (permalink)  
Старый 09.07.2017, 20:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,116

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

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


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #9 (permalink)  
Старый 09.07.2017, 21:01
Аватар для amigru
Новичок на форуме
Отправить личное сообщение для amigru Посмотреть профиль Найти все сообщения от amigru
 
Регистрация: 09.07.2017
Сообщений: 4

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

Последний раз редактировалось amigru, 09.07.2017 в 21:15.
Ответить с цитированием
  #10 (permalink)  
Старый 10.07.2017, 05:28
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как сделать проверку полей на js boris2000 Элементы интерфейса 12 18.11.2014 12:15
Как сделать выполнение одного JS после выполнения другого vita1ii Events/DOM/Window 2 11.01.2013 18:52
Как сделать как в JQ? faforty Общие вопросы Javascript 8 14.11.2011 01:35
JS классы - как объединить функции в класс olga153b Events/DOM/Window 3 01.11.2011 14:13
Как написать свой чат mycoding Оффтопик 2 14.08.2010 21:51