- 官网：http://www.woothemes.com/flexslider/
- CDN：http://www.bootcdn.cn/flexslider/
- GitHub：https://github.com/woothemes/FlexSlider
简介
说起焦点图插件，其实国内的相关插件最多，到今天依然有开发者一遍又一遍的重复造轮子，不过其中不乏精品。今天我用的这款插件jquery-flexslider在国外的流行度非常高，是焦点图插件的首选之一，所以我拿来用了一下。
下载
一个插件犯不上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都支持本地直接打开演示，不需要服务器环境，很方便。我今天试用了Basic Slider with Simple Caption。
安装
<head>里引入CSS：
<link href="http://cdn.bootcss.com/flexslider/2.6.3/flexslider.min.css" 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标签即可。根据语义法则，不要给li直接加链接，应当给文本和图片本身分别加链接。
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>
这是根据官方范例加的图注CSS。
JS Code:
<script type="text/javascript">
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide"
});
});
</script>
其中$(window).load()是为了让焦点图涉及的图片先加载完成，再加载轮播效果。如果图片K数不大，就不必$(window).load()，这样能更快的展现轮播效果。
