时间戳

首页 > 解决方案 > 同一页面上的多次单击幻灯片

jquery - 同一页面上的多次单击幻灯片

问题描述

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

  1. 第一次浏览幻灯片时，最后一张照片后面有一个空白，您必须再次单击才能让幻灯片再次运行，之后它会无缝重复。

  2. 页面上有多个幻灯片，并且

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

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

如果您想在现场尝试一下以更好地理解我的意思，您可以在此处进行。

这是我目前使用的代码：

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（我不能为每个幻灯片制作唯一的类/ID，因为这是一个主题而不是一个独立的网站）

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

标签： jqueryslideshowtumblr

解决方案

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

推荐阅读