Question

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

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

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

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

<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

好的，我的目标是让你尽可能清楚和简单地理解，（因为你刚接触到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);
            }
        }
    });

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

的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有类＆＃34; lastImg＆＃34;并且第一个有类＆＃34; showImg＆＃34;。

这是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，因此不会在后台运行。

如果有效，请告诉我。

在一个循环

2 个答案: