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 opacity property.
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.
If you find this code useful, please help support us to promote our work by clicking on the Facebook button on the left hand side of this page. Thank you.
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.
