SetTimeout 幻灯片循环问题

Question

我编写了以下函数，它允许我调用并在此页面上创建一个简单的幻灯片：http://www.ideacycling.com/html/portfolio.htm

        function show_slideshow(slide1, slide2, slide3){

            var timer, slide_no=1;

            function change_slide(){
                clearTimeout(timer); // tiden udloeb jo, så vi sætter den til 0 igen.
                switch(slide_no){
                    case 1: 
                        $("#nedrehoejre").toggleClass(slide1);
                        slide_no=2;
                        break;
                    case 2: 
                        $("#nedrehoejre").toggleClass(slide2);
                        slide_no=3;
                        break;
                    case 3: 
                        $("#nedrehoejre").toggleClass(slide3);
                        slide_no=1;
                        break;
                }
                timer = setTimeout(change_slide, 3500); //
            }
            change_slide();

        };

第三张幻灯片之后，在重新开始幻灯片放映之前，只显示背景一小段时间。（背景变为蓝色）

怎么会这样？

我该如何解决？

提前致谢。

Answer 1

timer = setTimeout(change_slide, 3500); // 因此在第三张幻灯片之后您正在等待超时，因为在滑块再次开始之前出现蓝屏。

我建议在情况三上调用 change_slide() 以再次循环它而不等待超时。改成这样：

 function show_slideshow(slide1, slide2, slide3){

            var timer, slide_no=1;

            function change_slide(){
                clearTimeout(timer); // tiden udloeb jo, så vi sætter den til 0 igen.
                switch(slide_no){
                    case 1: 
                        $("#nedrehoejre").toggleClass(slide1);
                        slide_no=2;
                        break;
                    case 2: 
                        $("#nedrehoejre").toggleClass(slide2);
                        slide_no=3;
                        break;
                    case 3: 
                        $("#nedrehoejre").toggleClass(slide3);
                        slide_no=1;
                        change_slide();
                        break;
                }
                timer = setTimeout(change_slide, 3500); //
            }
            change_slide();

        };

Answer 2

.toggleClass() 并不像您想象的那样有效。它允许您切换给定 class 选定的 DOM 元素。它不会影响元素上的其他 classes。

在您的情况下，连续调用 toggleClass() 会导致有问题的 class 值如下。

flex_indhold lightblaa bmx1
flex_indhold lightblaa bmx1 bmx2
flex_indhold lightblaa bmx1 bmx2 bmx3
flex_indhold lightblaa bmx2 bmx3
flex_indhold lightblaa bmx3
flex_indhold lightblaa

所以它在第 6 步没有按你想要的那样工作。你应该在添加新的之前清除其他 bmx_ classes。

$("#nedrehoejre").removeClass('bmx1 bmx2 bmx3');

此外，我建议您阅读 this post 上的评论。

function show_slideshow(slide1, slide2, slide3){

            var timer, slide_no=1;

            function change_slide(){
                clearTimeout(timer); 
                $("#nedrehoejre").removeClass('bmx1 bmx2 bmx3');
                // or $("#nedrehoejre").removeClass(slide1 + ' ' + slide2 + ' ' + slide3);
                switch(slide_no){
                    case 1: 
                        $("#nedrehoejre").toggleClass(slide1);
                        slide_no=2;
                        break;
                    case 2: 
                        $("#nedrehoejre").toggleClass(slide2);
                        slide_no=3;
                        break;
                    case 3: 
                        $("#nedrehoejre").toggleClass(slide3);
                        slide_no=1;
                        change_slide();
                        break;
                }
                timer = setTimeout(change_slide, 3500); //
            }
            change_slide();

        };

SetTimeout 幻灯片循环问题

SetTimeout slideshow loop issue

html

javascript

css

jquery

slideshow