Rotating images from a list

[cmyers]

I have a website i’m designing for wordpress (learning thanks to these tutorials! thanks). Anyway, i have a header with a div with an image in it. How can i get that image to rotate to a new image either every few seconds or each time the user refreshes the page?

thanks.

[mikes]

I’ve been wanting to do that as well. That’s a perfect example!

But I’m such a noob with js. I can’t extract what is necessary to duplicate that. :(

I copied those two images to my /images folder so as to keep the test as close as possible. I copied the one .js script (but renamed it ScrollAd.js) into my /js folder. I grabbed the css and html listed below and stuck them in the appropriate files. But I can’t get it to work. Isn’t that all that’s relevant to make the images cycle?

I’d post a link but I’m working locally. My webspace is in transition atm. What I get is a box the correct size to display one image. The first image in is the box but it is shifted right and down 20-40 pixels. And that’s it.

You’d think I would be able to figure out such a simple thing. Anyone willing to point out what I’m doing wrong?

Code:

#scrollad {
border:1px solid #FFBD5D;
height:125px;
line-height:125px;
margin-bottom:10px;
overflow:hidden;
width:710px;
}

#scrollad ul li {
clear:both;
height:125px;
line-height:125px;
margin:0;
overflow:hidden;
padding:0;
}

Code:

• 
• 

[mikes]

Thank you. That was much easier to follow and I got it working right off. It looks considerably more robust. I’m looking forward to playing with it further.

EDIT: Fantastic script. It’s amazing all the options it has. I can’t seem to get the bouncein to work though. I installed the easing script but it just changes from one image to the next without any animation. Do you need to edit something in one of the .js files to get them to work together?

[Author]

Posts