Databases
StackOverflow2013
Postsdbo
POHow do I add jQuery progress bar to slideshow gallery?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do I add jQuery progress bar to slideshow gallery?
    text
    copied!<p>I have a very basic jQuery slideshow and my friend and I are trying to figure out how to add a progress bar to indicate when the gallery will switch to the next image. Here is my slideshow code that my friend and I wrote. Thanks, any help is very appreciated.</p> <p>/* Javascript */</p> <pre><code>$('.ppt li:gt(0)').hide(); $('.ppt li:last').addClass('last'); $('.ppt li:first').addClass('first'); $('#play').hide(); var cur = $('.ppt li:first'); var interval; $('#fwd').click( function() { goFwd(); showPause(); } ); $('#back').click( function() { goBack(); showPause(); } ); $('#stop').click( function() { stop(); showPlay(); } ); $('#play').click( function() { start(); showPause(); } ); function goFwd() { stop(); forward(); start(); } function goBack() { stop(); back(); start(); } function back() { cur.fadeOut( 1000 ); if ( cur.attr('class') == 'first' ) cur = $('.ppt li:last'); else cur = cur.prev(); cur.fadeIn( 1000 ); } function forward() { cur.fadeOut( 1000 ); if ( cur.attr('class') == 'last' ) cur = $('.ppt li:first'); else cur = cur.next(); cur.fadeIn( 1000 ); } function showPause() { $('#play').hide(); $('#stop').show(); } function showPlay() { $('#stop').hide(); $('#play').show(); } function start() { interval = setInterval( "forward()", 5000 ); } function stop() { clearInterval( interval ); } $(function() { start(); } ); </code></pre> <p>/* HTML */</p> <pre><code> &lt;ul class="ppt"&gt; &lt;li&gt;&lt;img src="images/show_1_banner.jpg"&gt;&lt;/img&gt;&lt;/li&gt; &lt;li&gt;&lt;img src="images/show_2_banner.jpg"&gt;&lt;/img&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div id="buttons"&gt; &lt;button type="button" id="back" title="Previous"&gt;&lt;/button&gt; &lt;button type="button" id="stop" title="Stop"&gt;&lt;/button&gt; &lt;button type="button" id="play" title="Play"&gt;&lt;/button&gt; &lt;button type="button" id="fwd" title="Next"&gt;&lt;/button&gt; &lt;/div&gt; </code></pre> <p>/* CSS */</p> <pre><code>ul.ppt {position: relative;} .ppt li { position: absolute; width:770px; height:460px; } .ppt img { width:750px; height:440px; margin:0 auto; display:block; margin-top:10px; } </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