Question

我在网上找到了此代码，可以很好地创建幻灯片

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

有人可以告诉我如何调整代码，使其适用于多个幻灯片吗？

我尝试了许多尝试，但都失败了，希望有人能解决。

谢谢丹尼尔

Answer 1

使用class代替id，然后循环浏览幻灯片，即像这样：

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

如何将单个幻灯片脚本转换为多个幻灯片

1 个答案: