jQuery 插件 flexslider 初步使用

发现了个不错的 jQuery 幻灯片插件 flexslider，有接近 3000 Star，应该说是很靠谱的，下面是简单使用教程。

引入代码

所有代码都可以在 flexlslider 的 Github 上获得。

引入 css 文件和 js 文件和 jQuery 核心代码：

1 <link rel="stylesheet" href="flexslider.css">
2 <script src="jquery.min.js"></script>
3 <script src="jquery.flexslider-min.js"></script>

HTML 代码：

 1 <!-- Place somewhere in the <body> of your page -->
 2 <div class="flexslider">
 3   <ul class="slides">
 4     <li>
 5       <img src="slide1.jpg" />
 6     </li>
 7     <li>
 8       <img src="slide2.jpg" />
 9     </li>
10     <li>
11       <img src="slide3.jpg" />
12     </li>
13     <li>
14       <img src="slide4.jpg" />
15     </li>
16   </ul>
17 </div>

JavaScript 代码：

$(window).load(function() {
    $('.flexslider').flexslider({
        animation: 'slide',                 // 必备参数，自动滑动
        animationLoop: true,           // 是否循环滑动，默认为 true
         itemWidth: 500,                  // 定义每个 item 宽度，单位为 px，默认为 100%
         itemMargin: 0,                     // 定义每个 item margin，默认为 0
         controlNav: false,                // 是否显示滑动控制小圆点，默认为 true
        directionNav: false,               // 是否显示左右滑动控制控件，默认为 true
        slideshowSpeed: 2000,        // 每次自动滑动间隔时间，默认为 7000，单位为 ms
         animationSpeed: 500           // 手动点击滑动时间，默认为 600，单位为 ms
     });
});