How to transition through a few images?

[CheckOne]

Hi there everyone. I've done a couple of simple websites for local businesses (All people I know) and one asked me to add a banner at the top. So I created a div and set the banner image as the background. It worked very well. Now though, they just asked me if they could put 4 different banner images up there and have it transition through the images.

Does anyone know if I can do this with html or css?

I've never done anything like that and did a few searches online and found a couple of interesting posts but nothing that I could make work.

So I figured at this point I should ask and see if anyone has done this on here and how best it can be done.

Thanks, :)

[Nick H. Supervisor]

Looks like you could put something together using CSS and jQuery. I found this code which I imagine you could rework to fit what you were looking for (for example, rather than the continuous scroll like they show in the example, tweak it to switch every x seconds).

Sorry if it's not quite what you're looking for, I've been out of the game for a while now.

[Tidosho]

The Mandigo theme for Wordpress has this feature for the theme header, I use both on my blog! It cycles on page refreshes, and I think it can be timed too :)

I'm not sure if this'll help but here's a snippet. It uses PHP but might be useful nonetheless for you somehow:

// if we didn't find one but the "random headers" option is enabled

if (!$user_header && $mandigo_options['header_random_image']) {

shuffle($user_headers);

$user_header = array_shift($user_headers);

}

[CheckOne]

Thank you both for your help. I'm not using WordPress unfortunately, so I won't be able to use a theme for that.

I will take a look at the example Intrinsica posted to see how that one works. :)

I did find this example here: http://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/

But as simple as this one sounds, I still can't get it working. On my site the images are showing stacked one below the other (Instead of all in the same place) and they also don't fade. LOL I wasn't sure where to put the jquery file so I placed in in a jquery folder in my website directory and then also in the directory with my css and then also in the directory with the html files. Still no luck. :(