Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.03.2020, 01:24
Интересующийся
Отправить личное сообщение для Perepelenok Посмотреть профиль Найти все сообщения от Perepelenok
 
Регистрация: 16.07.2016
Сообщений: 22

Выбор всех элементов
Здравствуйте!

https://codepen.io/kotya_ra/pen/QWbYEZZ
Есть такой код.
Подскажите плиз, как сделать так, чтоб работало и второе слайдшоу?
Ответить с цитированием
  #2 (permalink)  
Старый 30.03.2020, 07:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,620

бесконечная смена картинок
Perepelenok,
id это уникально, это для одного элемента, если много однотипных используют class!
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .slideshow {
    margin: 50px auto;
    position: relative;
    width: 240px;
    height: 240px;
    padding: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.4);
  display : inline-block;
}

.slideshow > div {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
}
  </style>
  <script src='https://code.jquery.com/jquery-latest.js'></script>
  <script>
   $(function() {
    $(".slideshow").each(function(i, el) {
    var items = $(">div", el),
        len = items.length,
        i = len - 1,
        duration = 1000,
        pause = 2000;
    items.hide().last().show();
    (function Reload() {
        items.eq(i).delay(pause).fadeOut(duration, Reload);
        i = ++i % len;
        items.eq(i).delay(pause).fadeIn(duration)
    })()
    })
  });
  </script>
</head>

<body>
<div class="slideshow">
   <div>
     <img src="//farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg">
   </div>
   <div>
     <img src="//farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg">
   </div>
   <div>
     Pretty cool eh? This slide is proof the content can be anything.
   </div>
</div>
<div class="slideshow">
   <div>
     <img src="//farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg">
   </div>
   <div>
     <img src="//farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg">
   </div>
   <div>
     Pretty cool eh? This slide is proof the content can be anything.
   </div>
</div>
</body>

</html>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Выбор всех элементов 1111 Общие вопросы Javascript 5 03.07.2019 17:29
Как удалить класс всех дочерних элементов? Jeremen Events/DOM/Window 8 01.09.2012 19:43
Блокировка событий всех дочерних элементов moreo Элементы интерфейса 4 26.05.2012 22:58
Получить список ВСЕХ элементов DOM Почемучкин Events/DOM/Window 7 16.04.2012 10:33
Суммирование значений всех элементов div frolvict jQuery 1 11.07.2011 16:05