Automated JQuery Slideshow
<p>I created this slideshow using javascript and JQuery. I want to use it multiple times on a webpage. I can get both to appear, but only one will cycle through all the pictures and then start over again. The second one only cycles through and then ends. Can someone help me with the code? I want all slideshows on the webpage to continually cycle. Thanks.</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"/&gt;

&lt;title&gt;&lt;/title&gt;

&lt;script type="text/javascript" src="js/jquery-1.8.0.min.js"&gt;&lt;/script&gt;

&lt;script type="text/javascript"&gt;
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');
        });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});
&lt;/script&gt;

&lt;style type="text/css"&gt;

#slideshow {
    position:relative;
    height:350px;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

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

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

&lt;/style&gt;

&lt;/head&gt;

&lt;div id="slideshow"&gt;
    &lt;img src="ocean.png" alt="Slideshow Image 1" class="active" /&gt;
    &lt;img src="ocean2.png" alt="Slideshow Image 2" /&gt;
    &lt;img src="ocean3.png" alt="Slideshow Image 3" /&gt;
&lt;/div&gt;

&lt;br /&gt;

&lt;div id="slideshow"&gt;
    &lt;img src="flower.png" alt="Slideshow Image 1" class="active" /&gt;
    &lt;img src="flower2.png" alt="Slideshow Image 2" /&gt;
    &lt;img src="flower3.png" alt="Slideshow Image 3" /&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt; 
</code></pre>
