Question

我正试图从头开始构建一个非常简单的自动幻灯片，但我遇到了一些困难。我之前已经制作了工作幻灯片，但没有自动化。所以我开始构建一个并尝试使用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，代码将继续执行并且不会等待循环中的信息完成。所以我的问题是，什么是一个不需要使用外部库或插件的好的解决方法？如果你可以尝试尽可能贴近我的源代码，这将是非常棒的。谢谢！

Answer 1

您的代码存在一些问题。调用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()，但显然这不是代码的重要部分已经表现出来了。

构建JS自动幻灯片，但循环和/或setInterval实例同时运行？

1 个答案: