JQuery implements focus animation plug-in with horizontal slide BAR _ jquery

This is a very practical jQuery focus animation plug-in. Unlike other jQuery focus animation plug-ins, it has a horizontal slide bar, you can achieve image switching by sliding the slider, you can also click an image to switch between them. This is a very practical jQuery focus chart animation plug-in. Unlike other jQuery focus chart plug-ins, it has a horizontal slide, you can switch between images by sliding a slider or by clicking an image. This focus chart is implemented by jQuery only, and its compatibility and practicability are both acceptable. It is also relatively simple and can be easily integrated into the desired project.

The results are as follows:

HTML code

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 a focus animation plug-in for jQuery to implement a horizontal slide. I hope it will help you!