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

.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_类之前，应该清除其他bmx_类。

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

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

＆＃13;

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();

        };

＆＃13;

Answer 2

timer = setTimeout(change_slide, 3500); //由于这个原因，在第三张幻灯片之后你正在等待超时＆amp;因为在滑块再次启动之前会出现蓝屏。

我建议在第三种情况下调用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();

        };

SetTimeout幻灯片循环问题

2 个答案: