View Full Version : how to do banners like this one with jquery?

07-20-2010, 04:04 PM

How can i do this banners slide thing with jquery?


I want to make a banner like that ones.. with 4 options that can automaticly rotate or by the user clicking.

I guess this one is using jquery but i don't know how to do it.

anyone to help?


07-23-2010, 11:54 AM
Using CSS layout skills and jQuery, this is possible.

The whole banner is divided into three main areas, the main banner image display area, the slider area and the clickable buttons area:

<div class="banner">
<div class="bannerImages" style="position: relative;">
<div id="bannerImage1" style="position: absolute;"><img ... /></div>
<div id="bannerImage2" style="position: absolute;"><img ... /></div>
<div class="slider"><img style="position: absolute;" src="slider.gif" /></div>
<ul class="buttons">
<li id="button1">...</li>
<li id="button2">...</li>

then with jQuery, just hide the banner images that are not currently displayed. Set a periodic timeout to show the next banner and hide the rest. You could also use some animations (like fadeIn).

Then for the slider, simply change the "left" style value to make it move.

Finally, bind click events to the buttons and you are done.