Databases
StackOverflow2013
Postsdbo
POAutomated JQuery Slideshow
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAutomated JQuery Slideshow
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload