Inside the jQuery folder, create an HTML file called slideshow.html. While you could put the JavaScript code into a .js file and the style into a .css file, we are going to put all the code into one file.

Set up the HTML file using the basic HTML template.

Download one of two zip files available. The zip file called cuse.zip contains images from Syracuse University. The file called hvcc.zip contains images from here at HVCC.

Download jQuery.js and put it in the same folder as slideshow.html.

Begin coding a list of the images. Create an unordered list and set the id = crossfade. Each element of the list should look as follows:

< img src=picture.jpg>

Change the link and the actual image names to the correct values. Make sure to close the unordered list.

Style the slideshow. Add the following code inside style tags in the head section of the document.

#crossfade{ height: 600px; overflow: hidden; position: relative; width: 800px; }

#crossfade li{ height: 600px; position: absolute; width: 800px; }

The style stacks the images on top of each other. The JavaScript will be responsible for cycling through the images.

In the head section of the document, add the following code:

Underneath the above code, add another beginning and ending script tag. Add the following function called slideshow():

function slideshow() { $(#crossfade li:first).fadeOut(slow).next(). fadeIn(slow).end().appendTo(#crossfade); }

Remember that single and double quotation marks do not port well. You will have to delete and retype all of them if you copy and paste.

That is a lot of code packed into one line! JavaScript functions can be chained together like that. That line of code selects the first photo in the list, fades it out slowly, gets the next photo in the list and fades it in slowly. End() returns us to the original element (the one that was the first photo), and uses appendTo to move it to the end of the list.

The ready function runs as soon as the DOM is fully loaded. To cycle through the images, we want to first show the first image, and then call the slideshow() function during regular intervals.

$(function() { $('#crossfade li').hide(). filter(':first').show(); setInterval(slideshow, 3000); });

The first statement inside the ready function selects the list elements within the crossfade id. It hides the elements, filters those elements through the first pseudoclass and shows that one (the first one). The second line calls the JavaScript setInterval() function with the name of the function to be called and time between calls in milliseconds.

Your slideshow should now work! If you wish you can add other style or content to the document.

This is a web design assignment. Please help me and also follow the instruction . You can use any images on this assignment. Thank You. The link below is for jquery.js file.

https://bbprod.hvcc.edu/bbcswebdav/pid-3131850-dt-content-rid-8825311_1/xid-8825311_1