在一个循环后停止简单的 JavaScript 幻灯片

Question

我对 JavaScript 知之甚少，但我正在寻找一种我想使用的简单代码的解决方案。我没有尝试执行任何幻灯片或淡入淡出，只是一个从一个图像切换到下一个图像的简单幻灯片。我希望幻灯片只播放一次，然后停在序列中的最后一张图片上。任何帮助将不胜感激！

$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
  .next()
  .end()
  .appendTo('#slideshow');
},  3000);

正如我所说，这是一个非常简单的代码。第一个 GIF 只运行一次，第二个 GIF 循环。我希望幻灯片在循环 GIF 时停止。我想知道是否可以更改“3000”（我知道它对应于每张幻灯片的长度）以完成我正在寻找的内容。或者加一个停止函数...我不知道怎么写。

<div id="slideshow">
  <div>
  <img src="https://31.media.tumblr.com/e2c4bbaeb781a3b834cd09549595393f/
        tumblr_noy3q3l1dy1uwyyx9o2_1280.gif">
  </div>
  <div>
  <img src="https://33.media.tumblr.com/1d6495399687801067d62c83c4218644/
        tumblr_noy3q3l1dy1uwyyx9o1_1280.gif">
  </div>
</div>

Answer 1

好的，我用 objective 做到了这一点，让您尽可能清楚和简单地理解，（因为您是 js 新手...）

JS/Jquery:

    $(function () {
        setTimeout(playSlideShow, 3000);

        function playSlideShow() {

            var currImgContainer = $('.showImg');
            if (!$(currImgContainer).hasClass('lastImg')) {
                $('.showImg').removeClass('showImg').next().addClass('showImg');
                setTimeout(playSlideShow, 3000);
            }
        }
    });

所以在这里我们找到带有 class "showImg" 的 imgContainer(div)，然后使用 chaining，我们删除 class 并将其添加到下一个 imgContainer(div)。因此，将 CSS 切换为 show/hide 图像，直到找到具有 class "lastImg".

的 div

CSS:

    .slideShow > div:not(.showImg) {
        display: none;
    }

    .showImg {
        display: block;
        width: 400px;
        height: 400px;
    }

HTML:

<div class="slideShow" id="slideshow">
    <div class="showImg">
        <img src="Images/img1.png" alt="" />
    </div>
    <div>
        <img src="Images/img2.png" alt="" />
    </div>
    <div>
        <img src="Images/img3.png" alt="" />
    </div>
    <div class="lastImg">
        <img src="Images/img4.png" alt="" />
    </div>
</div>

这样你可以拥有任意多的图片，只要确保最后一张 div 有 class "lastImg" 而第一张有 class "showImg".

这是一个fiddle

希望对您有所帮助...

Answer 2

试试这个：

var intervalID = null;
var iterator = 0;
var intervalDuration = 3000;
var slideshow = $('#slideshow');
var divs = slideshow.find('div');

//divs.filter(':gt(0)').hide();
divs.eq(iterator).show();

intervalID = setInterval(function(){
    divs.eq(iterator).hide();
    iterator += 1;
    if (iterator === divs.length - 1) { clearInterval(intervalID); }
    divs.eq(iterator).show();
}, intervalDuration);

#slideshow > div { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="slideshow">
    <div>
        <img src="https://dl.dropboxusercontent.com/u/45891870/Experiments/Codepen/PIXI/0.4/images/JS.jpg" />
    </div>
    <div>
        <img src="https://dl.dropboxusercontent.com/u/45891870/Experiments/Codepen/PIXI/0.4/images/PIXI.jpg" />
    </div>
<div>
        <img src="https://dl.dropboxusercontent.com/u/45891870/Experiments/Codepen/PIXI/0.4/images/JS.jpg" />
    </div>
</div>

HTML 结构与您的结构相同，但我唯一更改的是图像源（不为我加载不倒翁图像）。但是JavaScript已经完全改变了。

在 HTML 中添加任意数量的 DIV 以进行测试。希望对你有帮助。

更新 #1：

添加了 CSS 以默认隐藏 divs。
将 intervalDuration 增加到 3000。只是为了确保有足够的时间加载图像。
注释了 JS 的 filter 行。
在前 filter 行的正下方添加了另一行 JS。
此更新还应仅在需要显示时加载您的 GIF，因此不会运行在后台。

如果可行，请告诉我。

在一个循环后停止简单的 JavaScript 幻灯片

Stop simple JavaScript slideshow after one loop

javascript

jquery

slideshow

setinterval