Time for action – creating a simple crossfade slideshow

Follow these steps to create a simple crossfading slideshow from scratch:

1. We'll get started by creating a basic HTML document and the associated files and folders just like we did in Chapter 1, Designer, Meet jQuery. In the body of the HTML document, include a list of images. Each list item will contain an image, which can optionally be wrapped in a link. In the sample code for the book, the images are cropped to 800 pixels by 450 pixels. Here's what the HTML looks like:

   <ul id="crossfade">
     <li><a href="http://en.wikipedia.org/wiki/Agua_Azul"><img src="images/AguaAzul.jpg"></a></li>
     <li><a href="http://en.wikipedia.org/wiki/Burney_Falls"><img src="images/BurneyFalls.jpg"></a></li>
     <li><a href="http://en.wikipedia.org/wiki/Deer_Leap_Falls"><img src="images/Deer_Leap_Falls.jpg"></a></li>  
   ...
   </ul>

2. Next, we'll write a few lines of...