In this first tutorial in a two-part series, I will explain how to build a basic slide show by using the Ajax module included with the increasingly popular jQuery JavaScript framework. As you'll see, the use of the handy “$.ajax()” method makes this process very simple.
Building a Slide Show with jQuery - Start building an Ajax-based slide show (Page 2 of 4 )
A good way to start building this Ajax-based slide show is by creating the application's front end. Since my main goal here is for you to learn how to use the Ajax module bundled with the jQuery library, I'm going to keep all of the CSS code and structural markup reduced to a minimum.
However, I must begin showing you some functional code, so below I defined a sample (X)HTML file. It is responsible for displaying a simple container on the browser that will house the slide show's images.
Please take a look at the signature of the following file, which creates a basic front-end for this Ajax application:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
As shown above, the front-end coded previously is really very basic. Essentially it's composed of only one div, identified as "container," which will house each image of the slide show, fetched from the web server via Ajax.
Apart from providing you with the CSS code and the structural markup that comprise the front-end of the slide show, here's an image that illustrates its visual appearance:
As you can see above, the structure of the front-end looks pretty primitive, but this is an aspect that isn't really important at the moment. Though now that I've shown you how to build a simple graphical interface for displaying a sequence of images, it's time to see how to use the Ajax capabilities of jQuery to implement a fully-functional slide show.
The logic that drives this web application will be constructed around the functionality of a method of jQuery called "$.ajax()". However, to learn the full details of this process, please click on the link that appears below and read the following section.
JavaScript 
/ 4 
Finishing a Slide Show Application with jQuery
