這是一款很實用的jQuery焦點圖動畫插件，跟其他jQuery焦點圖插件不同的是，它帶有一個水平的滑桿，你可以通過滑動滑桿實現(xiàn)圖片的切換，也可以通過點擊圖片來切換。這款焦點圖是純jQuery實現(xiàn)的，兼容性和實用性都還可以，而且也比較簡單，很容易集成到需要的項目中去。
效果展示如下所示：
HTML代碼
<div id="wrapper"><ul id="flip"><li title="The first image" ><img src="1.png" /></li><li title="A second image" ><img src="2.png" /></li><li title="This is the description" ><img src="5.png" /></li><li title="Another description" ><img src="4.png" /></li><li title="A title for the image" ><img src="3.png" /></li></ul><div id="scrollbar"></div></div>
CSS代碼
.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代碼
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);}}});});以上代碼是針對jQuery實現(xiàn)帶水平滑桿的焦點圖動畫插件，希望對大家有所幫助！
新聞熱點
疑難解答
