The realization of the focus graph animation plug-in with horizontal slider in jquery _jquery

This is a very practical jquery Focus animation plug-in, unlike other jquery focus diagram Plug-ins, it comes with a horizontal slider, you can slide the slider to achieve the picture, you can click on the picture to switch. This focus map is a pure jquery implementation, compatibility and practicality are also available, but also relatively simple, easy to integrate into the needs of the project.

The effect is shown as follows:

 

HTML code

<div id= "wrapper" >
<ul id= "Flip" > <li title= "The" the "1.png" ><"
/li>
<li title= "A second image" ></li> <li title= "This is the
Description "></li>
<li title=" Another description "></li>
<li title= "A title for the" image "></li>
</ul>
<div id= "scrollbar" ></div>
</div>

CSS Code

. ui-jcoverflip {
position:relative
}
. Ui-jcoverflip--item {
position:absolute;
Display:block;
}
/* Basic Sample CSS * * *
#flip {
height:200px;
width:630px;
margin-bottom:50px;
}
#flip. ui-jcoverflip--title {
position:absolute;
Bottom: -30px;
width:100%;
Text-align:center;
Color: #555;
}
#flip img {
display:block;
border:0;
Outline:none;
}
#flip a {
outline:none;
}
#wrapper {
height:300px;
width:630px;
Overflow:hidden;
Position:relative
}
. Ui-jcoverflip--item {
cursor:pointer;
}
Body {
font-family:arial, Sans-serif;
width:630px;
padding:0;
margin:0;
}
UL,
ul li {
margin:0;
padding:0;
Display:block;
List-style-type:none;
}
#scrollbar {
position:absolute;
left:20px;
right:20px;
}

jquery Code

jquery (document). Ready (function () {jquery (' #flip '). Jcoverflip ({current:2, beforecss:function (El, container, offs ET) {return [$.jcoverflip.animationelement (El, {left: (Container.width ()/2-210-110*offset + 20*offset) + ' px ', bo Ttom: ' 20px '}, {}), $.jcoverflip.animationelement (El.find (' img '), {Width:Math.max (10,100-20*offset*offset) + ' px '
}, {} )
];  }, Aftercss:function (EL, container, offset) {return [$.jcoverflip.animationelement (El, {left: (Container.width ()/2 + + 110*offset) + ' px ', bottom: ' 20px '}, {}), $.jcoverflip.animationelement (El.find (' img '), {Width:Math.max (10
, 100-20*offset*offset) + ' px '}, {})];  }, Currentcss:function (El, Container) {return [$.jcoverflip.animationelement (El, {left: (Container.width ()/2-100
+ ' px ', bottom:0}, {}), $.jcoverflip.animationelement (El.find (' img '), {width: ' 200px '}, {})];
}, Change:function (event, UI) {jQuery (' #scrollbar '). Slider (' value ', ui.to*25);}); JQuery (' #scrollbar '). slIder ({value:50, Stop:function (event, UI) {if (event.originalevent) {var newval = Math.Round (UI.VALUE/25); JQuery (' #fl
IP '). Jcoverflip (' current ', newval);
JQuery (' #scrollbar '). Slider (' value ', newval*25);
}
}
}); });

The above code is for jquery to achieve a horizontal slider with the focus of animation plug-ins, I hope to help!