在同一页面上多次单击幻灯片

Question

我正在尝试创建一个 Tumblr 主题，其中照片集显示为点击幻灯片。我（终于）设法让它几乎工作，但我仍然有几个问题。

第一次放映幻灯片时，最后一张照片后有一片空白，您必须再次单击才能使幻灯片放映再次运行，然后无缝重复。
页面上有多个幻灯片，并且

a) 如果单击第一个幻灯片，其他幻灯片将滚动浏览。

b) 通过单击第一个幻灯片显示最终幻灯片照片后，幻灯片变为空白（您可以继续单击它们，但没有图像显示）。

如果您想现场尝试一下以更好地理解我的意思，您可以这样做 here。

这是我目前正在使用的代码：

JQuery

$('.slideshow img:first-child').addClass('active');
$(document).ready(function () {
    $('.slideshow').on('click', function () {
        if ($('.active').next('.slideshow img').length) {
            $('.active').removeClass('active').next('.slideshow img').addClass('active');
        } else {
            $('.active').removeClass('active');
            $('.slideshow img').first().addClass('active');
        }
    });
});

HTML（我无法为每个幻灯片制作独特的classes/IDs，因为这是一个主题而不是一个独立的网站）

<div class="slideshow right_part>
    <img src="image_one.jpg" />
    <img src="image_two.jpg" />
    <img src="image_three.jpg" />
    <img src="image_four.jpg" />
</div>

<div class="slideshow right_part>
    <img src="image_un.jpg" />
    <img src="image_deux.jpg" />
    <img src="image_trois.jpg" />
</div>

<div class="slideshow right_part>
    <img src="image_uno.jpg" />
    <img src="image_dos.jpg" />
    <img src="image_tres.jpg" />
    <img src="image_cuatro.jpg" />
    <img src="image_cinco.jpg" />
    <img src="image_seis.jpg" />
</div>

CSS

.right_part {
       grid-area: rightpart;
       place-self: center;
       height: 100vh;
       display: flex;
       align-items: center;
       max-width: calc(100vw - 500px);
 }

.slideshow img {
       position: absolute;
       display: inline-block;
       max-width: calc(100vw - 500px);
       max-height: 90vh;
       margin: auto;
       align-self: center;
       opacity: 0;
       transform: translateX(-50%);
       -webkit-transition-duration: 0.5s;
       transition-duration: 0.5s;     
 }

 .slideshow {
       overflow: hidden;
 }

 .slideshow img.active {
       opacity: 1;
 }

Answer 1

$('.active') 将针对 DOM 中的每个 .active，你不希望这样。
您只需要一个 this 参考：

jQuery(function($) { // DOM ready

  const $slideshow = $('.slideshow');
  $slideshow.find("img:first").addClass('active');
  
  $slideshow.on('click', function() {
    const $actv = $('.active', this); // "active" of THIS!
    const $next = $actv.next()[0] ? $actv.next() : $actv.siblings().first()
    $actv.removeClass('active');
    $next.addClass('active');
  });
  
});

.slideshow {
  position: relative;
  height: 60px;
  width: 60px;
}

.slideshow img {
  position: absolute;
  top: 0;
  opacity: 0;
  transition: 0.5s;
}

.slideshow img.active {
  opacity: 1;
}

<div class="slideshow">
  <img src="//placehold.it/60x60/0bf?text=1" />
  <img src="//placehold.it/60x60/f0b?text=2" />
  <img src="//placehold.it/60x60/fb0?text=3" />
  <img src="//placehold.it/60x60/0bf?text=4" />
</div>

<div class="slideshow">
  <img src="//placehold.it/60x60/0bf?text=1" />
  <img src="//placehold.it/60x60/f0b?text=2" />
  <img src="//placehold.it/60x60/fb0?text=3" />
</div>

<div class="slideshow">
  <img src="//placehold.it/60x60/0bf?text=1" />
  <img src="//placehold.it/60x60/f0b?text=2" />
  <img src="//placehold.it/60x60/fb0?text=3" />
  <img src="//placehold.it/60x60/0bf?text=4" />
  <img src="//placehold.it/60x60/bf0?text=5" />
  <img src="//placehold.it/60x60/b0f?text=6" />
</div>

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

在同一页面上多次单击幻灯片

Multiple click slideshow on same page

jquery

slideshow

tumblr