Simple jQuery Cross-Fader Tutorial
The jQuery training course that we run, asks students to build simple jQuery banners. The purpose of this is to demonstrate to students the jQuery
.css() method in conjunction with the CSS3
Once a simple cross-fading banner is created, it is not too difficult to then enhance what they have by turning their code into a jQuery Plugin. This tutorial is designed for those that want to take what was learned from the jQuery training and build a stand-alone cross-fading banner with captions.
The main idea behind the code for this banner is to keep things simple while still having some ability to change the speed and interval of the cross-fading banner. The banner has additional support for text based titles and captions. The point of the banner code is to be small and portable.
The code is explained in detail below, but a zipped up version of the banner code with sample HTML, CSS and images is available from the download link for those that just want to get started using the banner.
jQuery Course Trainer
Bjorn has been involved in CSS based web design for nearly 20 years and has experience developing web applications in both small and large teams of developers.
Over the past few years he has closely followed the evolving standards for web development and has spent countless hours discussing appropriate markup with web designers in the industry. He has also run training courses on web standards and accessibility which stems from his vast experience with CSS web design.