Slideshow Script

<div id="slideshow">
    <img id="slideshowimage" src="" alt="" style="height:333px;width:500px" class="floatleft"/>
    <div id="narration" style="border:1px solid #fff;height:331px;width:390px" class="floatright"></div>
</div>
<div id="slideshowsourcecontainer">
    <div class="slideshowsourceimage"><img src="/Content/gallery/Image01.png" alt="" /><span></span></div>
    <div class="slideshowsourceimage"><img src="/Content/gallery/Image02.png" alt="" /><span></span></div>
    <div class="slideshowsourceimage"><img src="/Content/gallery/Image03.png" alt="" /><span></span></div>
    <div class="slideshowsourceimage"><img src="/Content/gallery/Image04.png" alt="" /><span></span></div>
    <div class="slideshowsourceimage"><img src="/Content/gallery/Image05.png" alt="" /><span></span></div>
    <div class="slideshowsourceimage"><img src="/Content/gallery/Image06.png" alt="" /><span></span></div>
    <div class="slideshowsourceimage"><img src="/Content/gallery/Image07.png" alt="" /><span></span></div>
    <div class="slideshowsourceimage"><img src="/Content/gallery/Image08.png" alt="" /><span></span></div>
    <div class="slideshowsourceimage"><img src="/Content/gallery/Image09.png" alt="" /><span></span></div>
    <div class="slideshowsourceimage"><img src="/Content/gallery/Image10.png" alt="" /><span></span></div>
    <div class="slideshowsourceimage"><img src="/Content/gallery/Image11.png" alt="" /><span></span></div>
    <div class="slideshowsourceimage"><img src="/Content/gallery/Image12.png" alt="" /><span></span></div>
    <div class="slideshowsourceimage"><img src="/Content/gallery/Image13.png" alt="" /><span></span></div>
    <div class="slideshowsourceimage"><img src="/Content/gallery/Image14.png" alt="" /><span></span></div>
    <div class="slideshowsourceimage"><img src="/Content/gallery/Image15.png" alt="" /><span></span></div>
    <div class="slideshowsourceimage"><img src="/Content/gallery/Image16.png" alt="" /><span></span></div>
    <div class="slideshowsourceimage"><img src="/Content/gallery/Image17.png" alt="" /><span></span></div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        startSlideShow();
    });
</script>

<!-- In an external JS file -->
var $images;
var slideShowIndex = 0;
var slideShowInterval = 7500;

function setSlideShowImage(index) {
    var $cur = $images.eq(index);
    var src = $cur.find('img').attr('src');
    var desc = $cur.find('span').html();
    $('#slideshowimage').attr('src', src);
    $('#slideshowimage').fadeIn(1000);
    $('#narration').html(desc);
}

function startSlideShow() {
    $images = $('div#slideshowsourcecontainer div.slideshowsourceimage');
    setSlideShowImage(0);
    slideShowIndex++;
    rotateSlideShow();
}

function rotateSlideShow() {
    var interval = setInterval(function () {
        if (slideShowIndex == $images.length) {
            slideShowIndex = 0;
        }
        setSlideShowImage(slideShowIndex);
        slideShowIndex++;
    }, slideShowInterval);

    $('#slideshowimage').hover(function () {
        clearInterval(interval);
    }, function () {
        interval = setInterval(function () {
            if (slideShowIndex == $images.length) {
                slideShowIndex = 0;
            }
            setSlideShowImage(slideShowIndex);
            slideShowIndex++;
        }, slideShowInterval);
    });
}