Time for action – creating a simple crossfade slideshow

Follow these steps to create a simple crossfading slideshow:

  1. 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" ...

Get jQuery for Designers Beginner's Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.