jQuery: Slideshow Crossfade simple

HTML Code:

<div id="slideshow">
    <img src="Images/System/SlideshowMakeup/img_big1.jpg" alt="" class="active" />
    <img src="Images/System/SlideshowMakeup/img_big2.jpg" alt="" />
    <img src="Images/System/SlideshowMakeup/img_big3.jpg" alt="" />
    <img src="Images/System/SlideshowMakeup/img_big4.jpg" alt="" />
    <img src="Images/System/SlideshowMakeup/img_big5.jpg" alt="" />
    <img src="Images/System/SlideshowMakeup/img_big6.jpg" alt="" />

</div>

Script:

<script type="text/javascript">

    $(document).ready(function () {

        //makeupSlideshow();
        setInterval(function () { slideSwitch() }, 5000);

        function slideSwitch() {

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

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

            var $next = $active.next().length ? $active.next()
            : $('#slideshow IMG:first');

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

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

    });
     
</script>

CSS:
#slideshow {
    position:relative;
    height:680px;
 
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    /*Due to absolute positioning,
    we need to define the height of the slideshow DIV*/
}

#slideshow IMG.active {
    z-index:10;
}

#slideshow IMG.last-active {
    z-index:9;
}

Note:
In order to stop the slideshow using setInterval:

On your last line: var slideTimer = setInterval(clickNext, 6000);

Then when you want to stop the animation: clearInterval(slideTimer);

Then when you want to restart it just set it again: slideTimer = setInterval(clickNext, 6000);

In order to toggle play and stop button for slideshow:

Suppose you have an HTML structure like this:

<div id="element" style="position:relative;">
   <img src="image1.gif" id="img1" />
   <img src="image2.gif" id="img2" style="display:none" />
</div>

and css :

img {
  position:absolute;
  top:0;
  left:0;
}

jQuery code:

$("#element").hover(function() {
    //fadeout first image using jQuery fadeOut
    $("#img1").fadeOut(200);
    //fadein second image using jQuery fadeIn 
    $("#img2").fadeIn(200);
}, function () {
    //fadeout second image using jQuery fadeOut
    $("#img1").fadeIn(200);
    //fadein first image using jQuery fadeIn
    $("#img2").fadeOut(200);
});

you need to use .hide and .show jQuery function.

Full code toggle play and stop button and change the slideshow accordingly as well:

    var slideTimer = setInterval(function () { slideSwitch() }, 5000);

   

    $("#togglePlayButton").toggle(function () {

        $("#img1").hide();

        $("#img2").show();

        $("#img2").src = "Images/System/pause.png";

        clearInterval(slideTimer);

    }, function () {

        $("#img1").show();

        $("#img2").hide();

        $("#img1").src = "Images/System/play.png";

        slideTimer = setInterval(function () { slideSwitch() }, 5000);

    });