Using jquery to implement a slider animation

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.