- 官網(wǎng)：http://www.woothemes.com/flexslider/
- CDN：http://www.bootcdn.cn/flexslider/
- GitHub：https://github.com/woothemes/FlexSlider
簡介
說起焦點(diǎn)圖插件，其實(shí)國內(nèi)的相關(guān)插件最多，到今天依然有開發(fā)者一遍又一遍的重復(fù)造輪子，不過其中不乏精品。今天我用的這款插件jquery-flexslider在國外的流行度非常高，是焦點(diǎn)圖插件的首選之一，所以我拿來用了一下。
下載
一個插件犯不上git，直接下載源碼包，其中demo非常豐富，包括：
Basic Slider
Basic Slider customDirectionNav
Basic Slider with Simple Caption
Slider w/thumbnail controlNav pattern
Slider w/thumbnail slider
Basic Carousel
Carousel with min and max ranges
Carousel with dynamic min/max ranges
Video & the api (vimeo)
Video & the api (wistia)
每一個demo都支持本地直接打開演示，不需要服務(wù)器環(huán)境，很方便。我今天試用了Basic Slider with Simple Caption。
安裝
<head>里引入CSS：
<link rel="stylesheet">
<body>最下方或者HTML代碼下方引入JS：
<script src="http://cdn.bootcss.com/flexslider/2.6.3/jquery.flexslider.min.js"></script>
最簡單的Markup大致是：
<img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
HTML Code:
<div class="flexslider">
<ul class="slides">
<li>
<\img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
<p class="flex-caption">Adventurer Cheesecake Brownie</p>
</li>
<li>
<\img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
<p class="flex-caption">Adventurer Lemon</p>
</li>
<li>
<\img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
<p class="flex-caption">Adventurer Donut</p>
</li>
<li>
<\img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
<p class="flex-caption">Adventurer Caramel</p>
</li>
</ul>
</div>
如果要給圖片和段落加鏈接，就分別加上a標(biāo)簽即可。根據(jù)語義法則，不要給li直接加鏈接，應(yīng)當(dāng)給文本和圖片本身分別加鏈接。
CSS Code:
<style type="text/css">
.flex-caption {
width: 96%;
padding: 2%;
left: 0;
bottom: 0;
background: rgba(0,0,0,.5);
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,.3);
font-size: 14px;
line-height: 18px;
}
</style>
這是根據(jù)官方范例加的圖注CSS。
JS Code:
<script type="text/javascript">
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide"
});
});
</script>
其中$(window).load()是為了讓焦點(diǎn)圖涉及的圖片先加載完成，再加載輪播效果。如果圖片K數(shù)不大，就不必$(window).load()，這樣能更快的展現(xiàn)輪播效果。
