Jquery slider banner

There is a nifty flash banner located here: http://osc4.template-help.com/drupal_30779/. I was wondering if there is a jquery library out there that allows me to achieve the same eff开发者_JS百科ect. (click, slide,expand). Thanks in advance

I wrote you a little answer that is a good start. The working code is at http://jsfiddle.net/fxBjw/ here it is in pieces

HTML

<div id="container">
    <ul>
        <li class="block" id="a"></li>
        <li class="block" id="b"></li>
        <li class="block" id="c"></li>
        <li class="block" id="d"></li>
        <li class="block" id="e"></li>
    </ul>
</div>

CSS

#container {
    height: 100px;
    width: 245px;
    border: #000 1px solid;
    overflow: hidden;
}
/*I am not great with css so the only thing i think you could do better is the positioning.
Maybe style everything in JS and use position absolute
there also may be a better way to handle the overflow but this is a good jq start*/
.block {
    width: 45px;
    height: 100px;
    display: inline-block;
    margin: 0px;
    position: relative;
    background-repeat: no-repeat;
}

#a {
    background: url(http://rndimg.com/ImageStore/OilPaintingOrange/50x100_OilPaintingOrange_d190c94ef0c845399e2849fd7e9d54de.jpg);}
#b {
    background: url(http://rndimg.com/ImageStore/OilPaintingBlue/50x100_OilPaintingBlue_44398b9cfff447938d5b02c56e275611.jpg);}
#c {
background: url(http://rndimg.com/ImageStore/OilPaintingGreenReal/50x100_OilPaintingGreenReal_d3284c223f484ad584d4cc6d9de29ba5.jpg);
}
#d {background: url(http://rndimg.com/ImageStore/OilPaintingGreen/50x100_OilPaintingGreen_03938e7dbfa74b0f861d9a0851a34455.jpg); }
#e {background: url(http://rndimg.com/ImageStore/OilPaintingBlueReal/50x100_OilPaintingBlueReal_d2e4856d7e4e4224b42ced5cf6675132.jpg); }

JS

//This creates the click function in jquery
$('#container li').click(function (event) {
    //Create a var for the index of the LI
    var ind = $(this).index();
    //Move the LI right to the edge I am not good with stying so there is probably a better way to do this also in the CSS
    //The set up is you move it to the right * the number of elements it is in the list
    $(this).animate({
       'right': ind*50+'px'
    });
    //Now for all the other list items
    $('#container li').each(function () {
        //Check if the items are after the one clicked if so move them off to the right
    if ($(this).index() > ind) {
             $(this).animate({ 'left': '200px'});
        //if they are smaller mover them to the left
    } else if ($(this).index() < ind ){
        $(this).animate({ 'right': '200px'});
    }});
});

I did not add a reset button just click run again the return animate should be pretty straight forward.

PS. Thanks for giving me an excuse not to do my HW

I agree with Blender, this wouldn't be very hard to code.

If your not familiar go over to the documentation and get to know it. The Jquery API

also print off this cheat sheet -> Jquery Cheat sheet

The cheat sheet is handy if you want to quickly look something up.

You get start with something like this -> http://www.marghoobsuleman.com/jQuery-common-accordion and then amend it to achieve the exact result you want.

depending how different what you want is it might be faster to amend an existing example rather than write completely from scratch.