在一个循环后停止简单的JavaScript幻灯片放映 [英] Stop simple JavaScript slideshow after one loop

问题描述

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

I know very little about JavaScript at all, but I'm looking for a solution to a simple code that I'd like to use. I'm not trying to execute any slides or fades, just a simple slideshow that switches from one image to the next. I want the slideshow to play through just once, and then stop on the last image in the sequence. Any help would be greatly appreciated!

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

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

正如我所说，这是一个非常简单的代码。第一个 GIF 只运行一次，第二个 GIF 循环。我希望幻灯片停止循环 GIF 。我想知道'3000'（我知道对应于每张幻灯片的长度）是否可以改变以完成我正在寻找的东西。或者添加一个停止功能......我不知道该怎么写。

As I said, it's a very simple code. The first GIF runs only once, the second GIF loops. I would like the slideshow to stop on the looping GIF. I'm wondering if the '3000' (which I know corresponds to the length of each slide) can be changed to accomplish what I'm looking for. Or else adding a stop function... which I don't know how to write.

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

推荐答案

好的我这样做的目的是为了清楚简单，让你尽可能地理解，（因为你刚接触js ......）

Ok I have made this with the objective of being as clear and simple for you to understand as possible, (since you new to 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);
            }
        }
    });

所以我们在这里找到带有showImg类的imgContainer（div），然后使用链接，我们删除该类并将其添加到下一个imgContainer（div）。因此，切换CSS以显示/隐藏图像，直到找到具有lastImg类的div。

So here we find the imgContainer(div) with the class "showImg", then using chaining, we remove the class and add it to the next imgContainer(div). Therefore toggling the CSS to show/hide the image until it finds the div that has the class "lastImg".

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有类 lastImg和第一个有类showImg。

This way you can have as many images as you want, just make sure the last div has class "lastImg" and the first one has the class "showImg".

这是一个小提琴

希望有帮助...

这篇关于在一个循环后停止简单的JavaScript幻灯片放映的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！