StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Check this : <a href="http://jsfiddle.net/codebombs/ukNmT/" rel="nofollow">http://jsfiddle.net/codebombs/ukNmT/</a></p> <p>I created a simple slide show with fading effect using jQuery.</p> <p><strong>HTML Code</strong></p> <pre><code><div id='items'> <div class='item first'>Item 1</div> <div class='item'>Item 2</div> <div class='item'>Item 3</div> <div class='item'>Item 4</div> <div class='item'>Item 5</div> </div> <ul id='controls'> <li id='prev'>Prev</li> <li id='play'>Play</li> <li id='pause'>Pause</li> <li id='next'>Next</li> </ul> </code></pre> <p><strong>CSS Code</strong></p> <pre><code>#items { position : relative; width : 400px; height : 200px; top : 20px; left : 20px; } .item { position : absolute; background-color : #eee; border : 1px solid #ccc; width : 398px; height : 198px; display :none; text-align : center; font-size : 72px; } .first{ display : block; } #controls { margin-top : 30px; } li { display : inline-block; padding : 5px; border : 1px solid #ccc; background-color : #eee; cursor : pointer; } #play { display : none; } </code></pre> <p><strong>JavaScript Code</strong></p> <pre><code>//To store timeout id var timeoutId; var slideImage = function( step ) { if ( step == undefined ) step = 1; //Clear timeout if any clearTimeout ( timeoutId ); //Get current image's index var indx = $('.item:visible').index('.item'); //If step == 0, we don't need to do any fadein our fadeout if ( step != 0 ) { //Fadeout this item $('.item:visible').fadeOut(); } //Increment for next item indx = indx + step ; //Check bounds for next item if ( indx >= $('.item').length ) { indx = 0; } else if ( indx < 0 ) { indx = $('.item').length - 1; } //If step == 0, we don't need to do any fadein our fadeout if ( step != 0 ) { //Fadein next item $('.item:eq(' + indx + ')').fadeIn(); } //Set Itmeout timeoutId = setTimeout ( slideImage, 5000 ); }; //Start sliding slideImage(0); //When clicked on prev $('#prev').click(function() { //slideImage with step = -1 slideImage ( -1 ); }); //When clicked on next $('#next').click(function() { //slideImage with step = 1 slideImage ( 1 ); }); //When clicked on Pause $('#pause').click(function() { //Clear timeout clearTimeout ( timeoutId ); //Hide Pause and show Play $(this).hide(); $('#play').show(); }); //When clicked on Play $('#play').click(function() { //Start slide image slideImage(0); //Hide Play and show Pause $(this).hide(); $('#pause').show(); }); </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