Question

请为我的jquery代码流程提供一些帮助。我已经让幻灯片显示工作，并决定更进一步，添加导航按钮/图像。

在下面的代码中，我首先用一个div测试它，div稍后会成为图片或按钮。无论如何我有它，所以当我点击div时，幻灯片将转到幻灯片放映的第一张图片。

现在我遇到的关键问题是，下面的代码可以正常工作，但点击后显示第一张图片需要5秒，我猜是因为超时功能。

请注意，这只是幻灯片演示函数中包含的代码片段。

$("#slidecontrol2").click(function(){
    next.removeClass('is-showing');
    $('#container').children(':first').children(':first').addClass('is-showing');


  });

  setTimeout(slideShow, 5000);

我尝试在click（）函数之后和超时函数之前再次调用该函数。

 $("#slidecontrol2").click(function(){
        next.removeClass('is-showing');
        $('#container').children(':first').children(':first').addClass('is-showing');
        **slideShow ();**

      });

      setTimeout(slideShow, 5000);

它有效，但现在我的图像快速疯狂了，我再次点击它，它加速并变得更疯狂。

请帮忙 ANYONE !!

Answer 1

我注意到slideShow没有参数，所以它必须自己处理“可见”幻灯片和下一张幻灯片。在我看来，您希望幻灯片自动发生（我从您那里收集setTimeout(slideShow, 5000);行）并且您希望在点击slidecontrol2元素时前进到下一张幻灯片。由于slideShow负责此渐进式操作，因此以下是您的代码应该是什么样的（下面的伪代码）：

var slideShow = function(){
    //Fades out current image, 
    //finds next image with class "is-showing" and fades it in
}

$(document).ready(function(){
    //Adds click handler to advance slideshow on click of button
    $("#slidecontrol2").click(function(){
        slideShow();
    });

    //Begins slideshow on load of page
    setTimeout(slideShow, 5000);
});

jquery代码流

1 个答案: