记一个好用的轮播图的FlexSlider

之前给自己公司的主页套用过一个js动态生成的轮播图，但是从载入的时机和载入后的效果都不太理想，又懒得去优化了，这次偶然遇到一个比较不错的轮播图的js插件，记录之。

首先它是给予jquery的，引进jquery和jquery.flexslider-min.js，然后定义div范围，在div内定义好要轮播的ul和li标签，然后设置flex参数渲染即可。不多说，上代码

<html>

<body>

 <div class="flexslider">

     <ul class="slides">

         <li>

         <img src="slide1.png" />

         </li>

         <li>

         <img src="slide2.png" />

         </li>

         <li>

         <img src="slide3.png" />

         </li>

     </ul>

 </div>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="jquery.flexslider-min.js"></script>

<script type="text/javascript">

      $(document).ready(function () {

           $('.flexslider').flexslider({

                 directionNav: true,

                 pauseOnAction: false,

                 initDelay : 5000,

           });

       });

</script>

</body>

</html>

至于这些参数是什么意思，不去纠结，用到的时候再看源代码的参数配置即可。git Url：https://github.com/woothemes/FlexSlider。源代码中有几十个参数可供选择。

巴特西

记一个好用的轮播图的FlexSlider

最新文章

热门文章