A jquery-based picture slide Switch Focus Graph Plugin

Before you share a lot of jquery plug-ins, today we want to share a jquery plugin is also more practical, is a jquery focus map plugin. The focus chart is quite common, can be looped to play 4 pictures, and each picture in the switch is a downward slide of the transition effect, and in the downward switch to produce elastic animation effects, in addition, the plug-in is based on jquery, various browser compatibility should be good.

Online preview Source Download

Here is the process and code to implement this jquery focus diagram.

HTML code:

<Divclass= "Slider-wrap col-width">    <Divclass= "Cycleslider-wrap"style= "Display:block;">       <DivID= "Slider"class= "Cycleslider"style= "position:relative; width:970px; height:350px;">             <Divclass= "Cycle-slider"><ahref= "http://js.itivy.com/"><imgsrc= "./images/1.jpg"width= "970"Height= " the"alt= "Accomplish many things with minimal code"></a></Div>             <Divclass= "Cycle-slider"><ahref= "http://js.itivy.com/"><imgsrc= "Images/2.jpg"width= "970"Height= " the"alt= "Creating value for customers is the value of our existence"></a></Div>              <Divclass= "Cycle-slider"><ahref= "http://js.itivy.com/"><imgsrc= "./images/1.jpg"width= "970"Height= " the"alt= "Accomplish many things with minimal code"></a></Div>             <Divclass= "Cycle-slider"><ahref= "http://js.itivy.com/"><imgsrc= "Images/2.jpg"width= "970"Height= " the"alt= "Creating value for customers is the value of our existence"></a></Div>        </Div>        <aID= "Cycle-prev"href="#"style= "opacity:0; left: -50px;">Prev</a>        <aID= "Cycle-next"href="#"style= "opacity:0; right: -50px;">Next</a>        <DivID= "Cycle-nav">        </Div>    </Div>    <Divclass= "Loader"style= "Display:none;"></Div></Div>

HTML code is simple, there is a picture loading animation, the initialization is hidden in the page, waiting to load the focus map picture will appear loading animation.

jquery Code:

The first is the corresponding script library referencing the jquery script library and the slider

<Scripttype= "Text/javascript"src= "Js/jquery.js"></Script><Scripttype= "Text/javascript"src= "Js/jquery.slider.pack.js"></Script><Scripttype= "Text/javascript"src= "Js/jquery.easing.js"></Script>

Then there is the initialized jquery code of the rendering:

JQuery (function() {JQuery (' #cycle-prev, #cycle-next '). CSS ({opacity: ' 0 ')}); JQuery ('. Cycleslider-wrap '). Hover (function() {JQuery (' #cycle-prev ', This). Stop (). Animate ({left: ' -31 ', opacity: ' 1 '},200, ' easeoutcubic '); JQuery (' #cycle-next ', This). Stop (). Animate ({right: ' -31 ', opacity: ' 1 '},200, ' easeoutcubic '));}, function() {JQuery (' #cycle-prev ', This). Stop (). Animate ({left: ' -50 ', opacity: ' 0 '},400, ' easeincubic '); JQuery (' #cycle-next ', This). Stop (). Animate ({right: ' -50 ', opacity: ' 0 '},400, ' easeincubic '));}); JQuery (". Cycleslider-wrap"). FadeIn (1000); JQuery (". Slider-wrap. Loader"). CSS ({display: "None")}); JQuery ("#slider"). Cycle ({fx:"Scrolldown", Speed:"800", timeout:"1000", easing:"Easeoutbounce", Next:"#cycle-next", prev:"#cycle-prev", Pager:"#cycle-nav"});});

via:http://www.w2bc.com/article/12518

A jquery-based picture slide Switch Focus Graph Plugin