Как вы можете конвертировать этот сценарий слайд-шоу в несколько слайд-шоу - PullRequest
0 голосов
/ 29 апреля 2020

Я нашел этот код в Интернете, который может прекрасно создавать слайд-шоу

https://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/

Может кто-нибудь сказать мне, как настроить код, чтобы он мог работать для нескольких слайд-шоу?

Я перепробовал много попыток, но потерпел неудачу и надеялся, что кто-нибудь сможет это сделать.

Спасибо, Даниэль

1 Ответ

0 голосов
/ 29 апреля 2020

Используйте class вместо id, затем l oop через слайд-шоу, ie, например:

$.each($(".slideshow > div:not(:first-child)"), function() {
  $(this).hide();
});

setInterval(function() { 
  $.each($(".slideshow"), function() {
    $(this).children().first()
      .fadeOut(1000)
      .next()
      .fadeIn(1000)
      .end()
      .appendTo(this);
   });
},  3000);
.slideshow { 
    margin: 50px auto; 
    position: relative; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

.slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<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>

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...