Play/Pause button for fullscreen background slideshow

I'm learning my way around jq开发者_如何学Pythonuery but I am not yet at the stage where I can add my own JavaScript. I have searched all over the internet for a way to add a play/pause button to my full-screen background-slideshow. Below is the JavaScript for the slideshow.

Cheers!

function slideSwitch() {
var $active = $('#slideshow IMG.active');

if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

// use this to pull the images in the order they appear in the markup
//var $next =  $active.next().length ? $active.next()
    //: $('#slideshow IMG:first');

// uncomment the 3 lines below to pull the images in random order

var $sibs  = $active.siblings();
var rndNum = Math.floor(Math.random() * $sibs.length );
var $next  = $( $sibs[ rndNum ] );


$active.addClass('last-active');

$next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 0.87}, 1000, function() {
        $active.removeClass('active last-active');
    });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

I would add a button to the #slideshow HTML, prepended or appended wouldn't matter (this assumes you start with the slideshow playing)

<a class="pause" href="#">Pause</a>

Then put the following in your CSS:

#slideshow {
    position: relative;
}
#slideshow a {
    position: absolute;
    top: ##px;
    left: ##px;
    display: none;
    width: ##px;
    height: ##px;
}
#slideshow:hover a {
    display: block;
}
a.pause {
    background-image: url('/path/to/pause.png');
}
a.play {
    background-image: url('/path/to/play.png');
}

And for the finale, just use the following javascript and configure it a little bit: //ADDED var t; //endADDED

function slideSwitch() {
var $active = $('#slideshow IMG.active');

if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

// use this to pull the images in the order they appear in the markup
//var $next =  $active.next().length ? $active.next()
//: $('#slideshow IMG:first');

// uncomment the 3 lines below to pull the images in random order

var $sibs  = $active.siblings();
var rndNum = Math.floor(Math.random() * $sibs.length );
var $next  = $( $sibs[ rndNum ] );

$active.addClass('last-active');

$next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 0.87}, 1000, function() {
        $active.removeClass('active last-active');
    });
}
//ADDED
//@TODO: this doesn't really account for the possibility that the slideshow wouldn't be playing on page load, it may be better to bind seperate events to .pause and .play, but in general, I think toggle may be more effective.  Another option would be to use click() and just throw in an if statement.
$('#slideshow').find('a').toggle(
    function() {
        $(this).attr('class', 'play');
        t = window.clearInterval(t);
    },
    function() {
        $(this).attr('class', 'pause');
        t = setInterval( "slideSwitch()", 5000 );
    }
);
//endADDED

$(function() {
     t = setInterval( "slideSwitch()", 5000 );
});

I apologize if it's a little quickly written, I probably would've done a few things a little different, but wanted to make it work w/ your previous code instead of just handing you something completely different with no explanation. If you want, I can find one of my slideshows later this evening that I've done before, and link you to a jsfiddle or gist of it, I just don't have time at the moment. If this doesn't work, it probably has something to do w/ the (set|clear)Interval shenanigans (to be honest, I've always just used (set|clear)Timeout(); )

Hope it helps!