jquery-flexslider焦点图插件使用手记

• 官网：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。

安装

里引入CSS：

最下方或者HTML代码下方引入JS：

最简单的Markup大致是：

HTML Code:

        

          

            

                <\img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
              
Adventurer Cheesecake Brownie
                
                

                <\img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
              
Adventurer Lemon
                
                

                <\img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
              
Adventurer Donut
                
                

                <\img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
              
Adventurer Caramel
                
          
        

如果要给图片和段落加链接，就分别加上a标签即可。根据语义法则，不要给li直接加链接，应当给文本和图片本身分别加链接。

CSS Code:

这是根据官方范例加的图注CSS。

JS Code:

其中$(window).load()是为了让焦点图涉及的图片先加载完成，再加载轮播效果。如果图片K数不大，就不必$(window).load()，这样能更快的展现轮播效果。