Rotating image banner?

Hi guys,

I'd like to create something like the banner at the top of this page in Javascript if that's at all possible? I know that one uses Flash, but I'm not a huge fan of that myself and this seems like something that could quite easily be done using Javascript, but I'm not really sure where to start.

Is this possible in js? Are there any pre-compiled libraries or scripts that'll help do this?

Thanks

My god, what a hideous website.

I think what you need for this is JS's window.setInterval() function. A basic version:

Code:

---

var images = ['img1.gif','img2.gif','img3.gif','img4.gif'];
var counter = 0;
window.setInterval(function() {
  counter++;
  if (counter == 4) counter = 0;
  document.getElementById('banner').setAttribute('src',images[counter]);
}, 2000);

---

It assumes there's an image the the id 'banner' and it'll change the src attribute every 2 seconds. If you want the links at the bottom too, that can easily be incorporated.

That's cool, thank you! is there anyway to make it so it's animated or looks a little bit fancier? I think that's the kind of thing he's after though, but just a little eye candy too if possible ;o

Hey .Rich.

By the looks of things that rotating banner you are looking at is done in Flash. Raffle's code is ideal for rotating different banner files (these could be Flash files) but pure javascript wouldn't allow you to do too much animation very easity. I'd go for Flash if that's what you're after.

Cheers

Pix

Aww that's a shame, but many thanks anyway :) Is there no way at all I could even put some sort of animation into Raffles' code?

You could do some DHTML, but that quite complex stuff and you wouldn't really get the results you're after, also not exactly well-supported either.

Where Raffle loads gifs, however, you could load flash files (.fla) and just make sure the setInterval is long enough to allow the animation length inside the fla file.

HTH!

Pix

Yes, you can animate it with javascript. Look into the effects library at http://www.mootools.net, the documentation is fairly good and you should be able to incorporate that into the code.

Much easier than doing it yourself and avoids Flash.

Jesus that site is absolutely incredible! Thank you so much!

A huge thanks to others for the great replies too, think I'll end up using something from that though ^^ :)

Pardon the ignorance but which of the functions do I actually have to use? I guess I need to use a modified version of what they've used on their main homepage navigation, but I'm not really too sure how and their documentation really doesn't seem to be aimed at beginners ;o

The Mootools forums seems like a good place to get the help you want.

I once played about with this sort of effect and I used Fx.Base, which you can find info on in the Documentation section.

Still not having a lot of luck unfortunately, have asked on the forum and read a few tutorials but still can't find anything I'm after :(

Any other suggestions please guys? And thanks again for the response so far :)

The Mootools documentation is pretty good an even has example code. What part did you not understand when you read it?

Sorry for such a late reply, forgot all about it 'til he just requested it again! :)

In all honesty I don't even know where to start, I just need to get something that mimics that banner on the Peta2 site, but even after reading the tutorials I don't have a clue which to use.

Well, the documentation is pretty clear with samples and everything... Do you have any JavaScript skills?

Unfortunately nope, not really, nothing beyond messing around with moo.fx anyway.

JavaScript frameworks really make life easier for people that are not so good with JavaScript. But if you don't understand the examples, then you should maybe at least learn enough so that you get the JavaScript basics. That should be enough and help you.