javascript - SetTimeout幻灯片循环问题

我已经编写了以下功能，该功能使我可以在此页面上调用并创建一个简单的幻灯片：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();

        };

在第三张幻灯片之后，仅短时间显示背景，然后重新开始播放幻灯片。 （背景变成蓝色）

怎么会这样？

我如何解决呢？

提前致谢。

最佳答案

.toggleClass()无法正常工作。它允许您切换给定类选择的DOM元素。它不会影响元素上的其他类。

在您的情况下，连续调用toggleClass（）会导致出现问题的类值，如下所示。


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_类之前将其清除。

$("#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();

        };