Using jquery to implement a slider animation

A relatively simple implementation mechanism of the Carousel animation is

Picture first float:left arranged grandfather container width parent container infinite width then the value of the left of the parent container always changes to achieve the animation effect

Examples are as follows

<Divclass= "Changebox_imgs">            <ulclass= "Changebox_imgs_list">                <Li><ahref="#"Target= "_blank"><imgalt= "CTO"src= "Images/banner1.jpg" />                </a>                </Li>                <Li><ahref="#"Target= "_blank"><imgalt= "CTO"src= "Images/banner2.jpg" />                </a>                </Li>                <Li><ahref="#"Target= "_blank"><imgalt= "CTO"src= "Images/banner3.jpg" />                </a>                </Li>            </ul>        </Div>

Can make the changbox_imgs of the fixed width

{    position: relative;     height: 354px;     width: 732px;     Overflow: hidden;}

Wide is the picture width

Then make the parent element infinitely wider

{    position: absolute;     width: 9999px;}

The element to scroll

{    float: left;     width: 732px;}

And then for the animation you just need to make the parent element's left value bigger.

How to Invoke

$ (function() {        //        $ (". Changebox_imgs_list"). Bannerimages ({speed            :$,            length:3,            easing:' easeinoutquint ',            Duration:        ); // Banner Slide effect    });

The specific function code is as follows special understood

　　

(function($){    /*the parameters of the animation are Linear,swing,jswing,easeinquad,easeoutquad, Easeinoutquad,easeincubic, Easeoutcubic,easeinoutcubic,     Easeinquart,easeoutquart,easeinoutquart, Easeinquint, Easeoutquint,easeinoutquint,easeinsine,easeoutsine, Easeinoutsine,easeinexpo,easeoutexpo,easeinoutexpo, Easeincirc, Easeoutcirc,easeinoutcirc,easeinelastic, EaseOutE Lastic,easeinoutelastic, Easeinback,easeoutback, Easeinoutback,easeinbounce,easeoutbounce,easeinoutbounce*/$.fn. Bannerimages=function(options) {varSettings = {length:3,speed:3000,easing: ' jswing ', duration:500};    $.extend (settings, options); //the self represents the element f that called this function, which represents the first child element    varSelf = This, F = 1; //to get its width turned into int    varWidth=parseint ($ ( This. Children () [0]). CSS (' width ')); varMain =function() {        //Width*f-width is actually        varj = (Width * F-width); //is the first one? Returns 0 otherwise returns a negative valuej= (J = = 0? 0:-j); //Animations can be animated by changing the distance from the leftself.animate ({left:j+ "px"}, {queue:false, Duration:settings.duration, easing:settings.easing});    }; //Start    functionstart () {//keep calling main after some timeSetTimeout (function() {f++; if(F >settings.length) {f= 1;            } start ();        Main ();    }, Settings.speed)}; //The first call is actually the start functionstart ();}}) (jQuery);

Special Tips Required

<type= "Text/javascript"  src= "Jquery.js"></ Script > <  type= "Text/javascript"  src= "Jquery.easing.1.3.js"  ></script>

Write a similar one later with Kissy.