(^454) ❘ CHAPTER 20 CREATING AN INTERACTIVE SLIDESHOW
.click(
function()
{
if (!slideshows[slideCollection].transitioning)
{
Next, you check to see if there is a resumeTimer active; the resumeTimer controls the interval between
slide transitions. If a timer is active, it is cleared by calling the native clearTimeout() method.
if (slideshows[slideCollection].resumeTimer)
{
clearTimeout(slideshows[slideCollection].resumeTimer);
}
The transitioning property is set to true to indicate that a slide animation is taking place. Then the
isInterrupted property is set to true to indicate that the user clicked a slide control and interrupted
the slideshow.
slideshows[slideCollection].transitioning = true;
slideshows[slideCollection].isInterrupted = true;
A reference to the
var li = $(this);
All
removed.
node.find('ul.slideshowControls li')
.removeClass('slideshowControlActive');
The currently visible slide identifi ed with the class name slide and the :visible pseudo-class
(proprietary to jQuery) is faded out with an animation.
node.find('.slide:visible')
.fadeOut('slow');
A reference to the current slide’s offset number is retrieved from the text inside the
current
var slideInCollection = parseInt($(this).text());
A counter variable is created so that when the slideshow resumes, the counter property contains the
correct reference to the correct slide.
var counter = slideInCollection + 1;
If the number contained in slideInCollection + 1 exceeds the length of slides in the collection,
then the counter is reset to 1. This moves the slideshow forward from the last slide to the fi rst
slide in a loop.
var resetCounter = (
(slideInCollection + 1) >
node.find('ul.slideshowControls li').length
http://www.it-ebooks.info