Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Выбор всех элементов (https://javascript.ru/forum/jquery/79819-vybor-vsekh-ehlementov.html)

Perepelenok 30.03.2020 01:24

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

https://codepen.io/kotya_ra/pen/QWbYEZZ
Есть такой код.
Подскажите плиз, как сделать так, чтоб работало и второе слайдшоу?

рони 30.03.2020 07:58

бесконечная смена картинок
 
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>


Часовой пояс GMT +3, время: 10:10.