Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Jul 2006
    Posts
    120
    Thanks
    1
    Thanked 0 Times in 0 Posts

    how to do banners like this one with jquery?

    Hello.

    How can i do this banners slide thing with jquery?

    Code:
    http://www.barackobama.com/index.php?splash=false
    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?

    THanks

  • #2
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:

    Code:
    <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>
        <div class="slider"><img style="position: absolute;" src="slider.gif" /></div>
        <ul class="buttons">
            <li id="button1">...</li>
            <li id="button2">...</li>
        </ul>
    </div>
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •