之前给自己公司的主页套用过一个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。源代码中有几十个参数可供选择。