JQuery implements the focus animation plug-in with horizontal slide. jquery focus

JQuery implements the focus animation plug-in with horizontal slide. jquery focus

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 the image to switch. 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

<div id="wrapper"><ul id="flip"><li title="The first image" ></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, 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!

Articles you may be interested in:

• Jquery1.4.2-based playback effect of the super-bright focus image of the imitation flash
• Jquery focus chart for Image Display Effect code
• Implement image carousel effect (focus chart) based on JQuery)
• Focus Image switching implemented by jquery with thumbnails (automatic playback/response to Mouse Action)
• Jquery focus image switching (Digital tagging/manual/automatic playback/horizontal scrolling)
• Jquery imitation QQ mall with left and right buttons to control focus image switching scroll Effect