javascript - 构建JS自动幻灯片放映，但是loop和/或setInterval实例同时运行？

我试图从头开始构建一个非常简单的自动幻灯片，但是遇到了一些困难。我之前已经建立了工作幻灯片，但是没有自动幻灯片。因此，我开始构建一个并尝试使用for循环结构或setInterval（）方法来模拟循环：

$(function carousel() {
    $('.slide:not(:first-child)').hide();
    var slide1 = $('.slide:first-child');
    var slide2 = $('.slide:nth-child(2)');
    var slide3 = $('.slide:nth-child(3)');
    var slide4 = $('.slide:last-child');

    function moveSlide(currentSlide, nextSlide) {
        setInterval(function () {
            currentSlide.hide("slide", {direction: "left"}, 1000);

            setTimeout(function () {
                nextSlide.show("slide", {direction: "right"}, 1000);
            }, 1000);
        }, 1500);
    }

    var arr = [moveSlide(slide1, slide2), moveSlide(slide2, slide3), moveSlide(slide3, slide4)];
    var i = 0;
    setInterval(function () {
        if (i < arr.length) {
            arr[i] += 1;
            console.log(i + "=>" + arr[i]);
        } else {
            return;
        }
        i++;
    }, 1500);
});

这是Codepen。

不幸的是，这进展不顺利，我知道为什么。我知道在JS中，如果使用setInterval或setTimeout，代码将继续执行，并且不会等待循环中的信息完成。所以我的问题是，什么是不需要使用外部库或插件的好解决方法？如果您可以尝试尽可能贴近我的源代码，那就太好了。谢谢！

最佳答案

您的代码有一些问题。调用moveSlide()将隐藏指定的幻灯片，并（在超时后）显示指定的下一张幻灯片，但是在该函数中使用setInterval()表示它将继续尝试隐藏同一张第一张幻灯片，然后显示下一张。

带有var arr = [moveSlide(slide1, slide2),...的行将立即调用moveSlide()函数并将其返回值放入数组中。因此，这意味着您已经运行了多个时间间隔（每次调用moveSlide()一个），并且所有步骤都互相作用以试图隐藏和显示相同的元素。同样，返回值是undefined，因此基本上您有一个充满undefined的数组。

我建议您改为执行以下操作：

    $(function carousel() {
        // get a list of *all* slides:
        var slides = $('.slide');
        // hide all but the first:
        slides.slice(1).hide();
        var current = 0;

        setInterval(function() {
          // hide the current slide:
          slides.eq(current).hide(1000);
          // increment the counter, wrapping around from end of the
          // list to the beginning as required:
          current = (current + 1) % slides.length;
          // show the next slide after a timeout:
          setTimeout(function () {
             // note that `current` was incremented already:
             slides.eq(current).show(1000);
          }, 1000);
        }, 3500); // make the interval larger than the hide/show cycle
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="slide">Slide 1</div>
<div class="slide">Slide 2</div>
<div class="slide">Slide 3</div>
<div class="slide">Slide 4</div>
<div class="slide">Slide 5</div>

请注意，我不需要单个幻灯片的单个变量，而只有一个slides变量，它是包含所有幻灯片的jQuery对象。这意味着您可以轻松更改页面上的幻灯片数量，而无需完全更改JS。

请注意，我太急躁，无法让jQueryUI可以在代码段中工作，因此我只使用了简单的.hide()和.show()，但是显然，这并不是所显示代码的重要部分。

关于javascript - 构建JS自动幻灯片放映，但是loop和/或setInterval实例同时运行？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42569237/