标签:
之前给自己公司的主页套用过一个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。源代码中有几十个参数可供选择。
标签:
原文地址:http://www.cnblogs.com/azul0906/p/4279598.html