There are a myriad free libraries out there that offer JQuery image rotator functionality. The idea is simple enough - cycle through a series of images, smoothly transitioning between each using some effect or other.

So why code your own? Simplicity and control are the main reasons. Unless you're already loading up a 3rd-party rotator library, why add to the bandwidth overhead? Some of those libraries can be quite time-consuming to get to grips with, so a roll-your-own solution can be quicker for simple transitions. Finally, when you know exactly what's happening, when and how, then you have more control over the final effect and can tweak it exactly as you wish.

So, without further ado, onto the code: Have you ever had the problem where a jQuery animation you've coded works nice and smoothly while on the active tab, but put it in a background tab for a while, and it goes all funky by the time you come to switch back? That's what the filter(':not(:animated)') filter is there for - it basically stops animations queueing up, which is what causes the weird behaviour when tabs with animations are brought back from the background. See this CSS Tricks site for more info and demos on this filter and others like it.

In order to make the slideshow cycle smoothly between images, we need to preload them, using code such as that below: Click this link for more details on the image preloader.