Follow these steps to create a simple crossfading slideshow:
We'll get started by creating a basic HTML document and 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. Here's a sample of my image list:
<ul id="crossfade"> <li> <a href="http://en.wikipedia.org/wiki/Agua_Azul"><img src="images/600/AguaAzul.jpg" alt="Agua Azul"/></a> </li> <li> <a href="http://en.wikipedia.org/wiki/Burney_Falls"><img src="images/600/BurneyFalls.jpg" alt="Burney Falls"/></a> </li> <li> <a href="http://en.wikipedia.org/wiki/Venezuala"><img src="images/600/Cachoeira_do_Pacheco.jpg" alt="Cachoeira do Pacheco"/></a> </li> </ul>
Next, we'll write a few lines of CSS to...