jQuery implements focus map animation plug-in with horizontal slider_jquery

This is a very practical jQuery focus map animation plug-in. Unlike other jQuery focus map plug-ins, it has a horizontal slider. You can switch images by sliding the slider, or by clicking Picture to switch. This focus map is implemented purely with jQuery. It has good compatibility and practicality. It is also relatively simple and can be easily integrated into required projects.

The effect is shown as follows:

HTML code

<div id="wrapper">
<ul id="flip">
<li title="The first image" ><img  src="/static/imghwm/default1.png"  data-src="1.png"  class="lazy" / alt="jQuery implements focus map animation plug-in with horizontal slider_jquery" ></li>
<li title="A second image" ><img  src="/static/imghwm/default1.png"  data-src="2.png"  class="lazy" / alt="jQuery implements focus map animation plug-in with horizontal slider_jquery" ></li>
<li title="This is the description" ><img  src="/static/imghwm/default1.png"  data-src="5.png"  class="lazy" / alt="jQuery implements focus map animation plug-in with horizontal slider_jquery" ></li>
<li title="Another description" ><img  src="/static/imghwm/default1.png"  data-src="4.png"  class="lazy" / alt="jQuery implements focus map animation plug-in with horizontal slider_jquery" ></li>
<li title="A title for the image" ><img  src="/static/imghwm/default1.png"  data-src="3.png"  class="lazy" / alt="jQuery implements focus map animation plug-in with horizontal slider_jquery" ></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, offset ){
return [
$.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 210 - 110*offset + 20*offset )+'px', bottom: '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 + 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( '#flip' ).jcoverflip( 'current', newVal );
jQuery('#scrollbar').slider('value', newVal*25);
}
}
});
});

The above code is for jQuery to implement a focus map animation plug-in with a horizontal slider. I hope it will be helpful to everyone!