jquery pause/play slideshow

Question

I need to add a pause/play button to some existing jquery code used for a slide show.

When the span with a class of "pause-slide" is clicked the slide show should stop on the current slide, the pause button hidden and the play button made visible.

Obviously when the span with the class of "play-slide" is clicked it will the resume the slide show, hide the play button and make the pause button visible again.

Any pointers would be much appreciated.

Jquery

var slide={ 
    init:function(){
        $('#section-heading-images').children('div.slide_image').each(function(index){
            if(! $(this).hasClass('active')){
                $(this).show();
            }
            //var diff=$('#section-heading-images').height() - $(this).children('div.slide_text_container').height() ;
            //$(this).children('div.slide_text_container').css('top',diff);
            if(! $(this).hasClass('active')){
                $(this).hide();
            }
        });
    }
}

var headimages={    
    slideSwitch:function(){
        var current=$('#section-heading-images div.active');
        var next;

        if(current.next('div.slide_image').length > 0){
            next=current.next();
        }else{
            next=current.parent().children('div.slide_image:first');
        }
        headimages.showNextSlide(current,next); 
    },
    setSlides:function(){
        $('span.section-heading-pointer').click(function(){
            $('div.slide_image').stop(true,true)
            var current_id=$(this).attr('id').substr(24);
            //var next=$('#section-heading-image-'+current_id);
            var current=$('#section-heading-images div.active');
            headimages.showNextSlide(current,current_id);
        });
    },
    showNextSlide:function(current,next){
        //Next is a jQuery object
        if(next instanceof $) {
            navNext = $("#slide-switcher > .active").next();
            if(navNext.attr("class") != "section-heading-pointer" && navNext.attr("class") != "section-heading-pointer ") navNext = $("#section-heading-pointer-0");
        }
        //Next is an id
        else{
            var nid = next;
            next=$('#section-heading-image-'+nid);
            var navNext = $("#section-heading-pointer-"+nid);
        }
        // Put the existing on top
        $(current).removeClass('active');
        $(next).addClass('active');

        $("#slide-switcher > .active").removeClass("active");
        $(navNext).addClass("active");

        // Reveal the next slide underneath the current
        $(next).show();
        $(current).css('z-index',1);

        // Fade the current slide out
        $(current).fadeOut(1500);
        // Put the revealed slide on top
        $(next).css('z-index',0);

    },
    init:function(){
        var minheight=0;
        $('#section-heading').children('div.slide_image').each(function(index){
            $(this).show();
            if(minheight==0){
                minheight=$(this).height();
            }
            if($(this).height < minheight){
                minheight=$(this).height();
            }
            $(this).hide();
        });
        headimages.setSlides();
    }
}

$(document).ready(function() {
    if($('#section-heading').length > 0){
        headimages.init();
        slide.init();
        if($('#section-heading-images').children('div.slide_image').length > 1){
            setInterval( "headimages.slideSwitch()", 8000);
        }else{
            $('#slide-switcher').hide();
        }
    }   

    $('span.arrow_right').click(function(){
        $('div.slide_image').stop(true,true)
        var current_id=$(this).attr('id').substr(24);
        //var next=$('#section-heading-image-'+current_id);
        var current=$('#section-heading-images div.active');
        headimages.showNextSlide(current,current_id);
    });

});

HTML

<div id="section-heading">
        <div id="section-heading-images">   
            <div id="section-heading-image-0" class="slide_image">

                <div class="image-container">
                    <img src="image_zero.jpg" alt="" height="330" width="1000">
                </div>
            </div>

            <div id="section-heading-image-1" class="slide_image">
                <div class="image-container">
                    <img src="image_one.jpg" alt="" height="330" width="1000">
                </div>
            </div>

            <div id="section-heading-image-2" class="slide_image">
                <div class="image-container">
                    <img src="image_two.jpg" alt="" height="330" width="1000">
                </div>
            </div>




        <div id="section-heading-selectors">
            <div id="slide-switcher">
                <span class="section-heading-pointer" id="section-heading-pointer-0"></span>
                <span class="section-heading-pointer" id="section-heading-pointer-1"></span>
                <span class="section-heading-pointer" id="section-heading-pointer-2"></span>
                <span class="pause-slide">Pause</span>
                <span class="play-slide">Play</span>
            </div>
        </div>
</div>

Answer 1

Here is one example using a variable stop.

http://jsfiddle.net/L7yKp/104/

Initialize stop variable

var stop = false;

If the stop button is clicked then set stop to true.

$('#stop').click( function() 
{
stop = true;
//stop();
showPlay();
} );

If the play button is clicked then set stop to false and call runSlideShow() to start the slide show.

 $('#play').click( function() 
{
stop = false;
runSlideShow();
showPause();
} );

In your slideShow function if stop is true then return false which stops the function from running. Thus stopping your slide show.

var slideShow = function()
{
if(stop)
    return false;
....
}

Instead of running your slideshow from the moment the page loads I called showPlay() so that the pause button would be hidden and the slideshow wouldn't start until clicked.

showPlay();

Hopefully this example will get you started and give you an idea. It's just one of many ways you could do it.