這是一款很實(shí)用的jQuery焦點(diǎn)圖動(dòng)畫插件，跟其他jQuery焦點(diǎn)圖插件不同的是，它帶有一個(gè)水平的滑桿，你可以通過滑動(dòng)滑桿實(shí)現(xiàn)圖片的切換，也可以通過點(diǎn)擊圖片來切換。這款焦點(diǎn)圖是純jQuery實(shí)現(xiàn)的，兼容性和實(shí)用性都還可以，而且也比較簡單，很容易集成到需要的項(xiàng)目中去。

效果展示如下所示：

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);

}

}

});

});

以上代碼是針對(duì)jQuery實(shí)現(xiàn)帶水平滑桿的焦點(diǎn)圖動(dòng)畫插件，希望對(duì)大家有所幫助！