SetTimeout slideshow loop issue

Question

I have programmed the following function, that allows me to call and create a simple slideshow on this page: 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();

        };

After the third slide only the background is shown for a short time, before restarting the slideshow. (Background turns blue)

How can this be?

And how do I work around it?

Thanks in advance.

Answer 1

.toggleClass() is not working as you think. It allows you to toggle given class selected DOM elements. It doesn't affect other classes on elements.

In your case, consecutive calls of toggleClass() results in problematic class values as follows.

1. flex_indhold lightblaa bmx1
2. flex_indhold lightblaa bmx1 bmx2
3. flex_indhold lightblaa bmx1 bmx2 bmx3
4. flex_indhold lightblaa bmx2 bmx3
5. flex_indhold lightblaa bmx3
6. flex_indhold lightblaa

So it's not working as you want at step 6. You should clear other bmx_ classes before adding new one.

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

Also I suggest you to read comments on 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();

        };

Answer 2

timer = setTimeout(change_slide, 3500); // due to this after the third slide you are waiting for timeout & because of that blue screen appears before slider starts again.

I suggest to call change_slide() on case three to loop it all over again without waiting for timeout. Change this way:

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

        };