Image slider example from Understanding jQuery

<

Leading photo "Ladybug after the rain" copyright Jens Kolk, his blog is here.

jQuery Image Slideshow

Everyone wants to know how to build image slideshows. But most online slideshows are just jQuery plugins with instructions on how to use them. What's a more perfect way to teach jQuery and JavaScript than by analyzing an image slideshow? This is a great example for studying JavaScript arrays, jQuery selectors, binding onmouse events and dynamic CSS.

I thought a tutorial covering image slideshows was overdue since I started my newsletter about 5 months ago (in February 2012). So, I thought it was the right time. Right click and select "view page source" to view the jQuery, CSS and HTML source code. This demo is from the revision 3 of my tutorial e-book. If you like this tutorial, you will find many more in my book among numerous examples that explain exactly how jQuery works.

$(document).ready() { ... }


CSS


HTML


To add your own images simply modify the following array:

var Images = ["1.png", "2.png", "3.png", "4.png", "5.png"];

 

You have my permission to use this code in your own projects.

Slideshow