Cross-Fading Rotating Images - J Query

Problem
On pages that contain a large masthead or “hero” image, often seen on e-commerce sites, many different products and/or departments are vying for that top spot. Often,the compromise is to simply have a series of images fade in and out, repeating on a loop. This is all well and good but can often be frustrating to use, because far too many sites overlook the need to pause the rotation in order to glean the very information that is attempting to be conveyed.
The implications of a constant animation should be considered. Most users have learned to ignore annoying ads that contain a lot of motion. The designer/developer must take into account those users who might not want to see the animation, while also trying to read the rest of the page. Worse yet is when a user attempts to read one of the rotating slides, only to have it continue to animate. Therefore, play/pause functionality is be included in this recipe, lest our users be caught in an endless, animated loop.

Solution

Using jQuery’s.fadeIn() and .fadeOut() methods, we can create a nice cross-fade animation that will iterate through an array, changing each image’s opacity based on a set timer. By implementing what we learned from the tabbed document portion of this section, we can create links to each image, which not only will cause the target image to come to the forefront but also sets a flagged variable of pause to either true or false, which will start or stop the animation. This makes for a truly usable image rotator versus pure eye candy.

Rotator—HTML code

Rotator—jQuery code

Discussion

This recipe starts off by defining two key variables: speed (a numeric value in milliseconds) and pause (a Boolean to tell the rotator whether to play). Initially, speed has been set to two seconds, and pause is set to false, allowing the rotator to autoplay when the page loads.
Inside the rotate() function, a variable has been set called $next_li, which will correspond either to the next <li>after the one currently being animated or to the first<li>in the array (in the case of reaching the end of the array and needing to begin a new). Likewise, the same premise is being applied to links within <ul id="rotator_controls">in order to add a visual indicator of which image’s button is currently active. After a slight delay of two seconds, the whole sequence is kicked off again. If that were where this demo ended, it could get pretty tiresome seeing images rotate uncontrollably. Luckily, we can reuse the in-page anchor link technique from the tabbed document recipe. We simply assign click listeners to each of the links in <ul id="rotator_controls">and then reveal the target image while hiding the rest. We also add a play/pause button that will start and/or stop the rotator from animating. Last is the code that sets everything into motion. All but the first <li>within<ul id="rotator">are hidden, and then when the window has finished loading, the animation begins. Note that$(window).load() differs from \$(document).ready() because the former waits for all assets to load completely, including images, which is especially important for the case of an image rotator. The latter simply waits for the HTML structure to be intact, which is important for applying functionality even as the rest of the images on a page are loading. Both are important, and each one has its place.