首页大图淡入淡出效果工具flexslider

网站首页放几张高清大图轮流播放展示是目首页设计的流行做法，虽然woothemes.com已经公布了比较成熟的flexslider工具，但我也做了一个自己的flexslider，自己掌握核心技术才是王道，下面简单介绍下我这款插件的用法。

首先是下载flexslider，放到自己的web项目目录下，flexslider代码和demo有托管到github，大家可以去用浏览器打开https://github.com/dige1993/flexslider.git进行查看和下载，当然也欢迎大家提交改进版。

然后，在页面中引用flexslider:

<link rel="stylesheet" type="text/css" href="css/flexslider-1.0.css">
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/flexslider-1.0.js"></script>

由于这个工具是基于jquery开发的，所以在引用flexslider-1.0.js之前有引用jquery库。

然后，要准备一个div元素，里面包含一个img元素，这就是图片展示的区域：

<div id="test">
    <img id="flexslider-img" src="http://image.zuchecdn.com//newversion/focusPicture/2016/20160821shangmen_web.jpg" />
</div>

div、img的大小和位置可以另外用css定制好。然后就在js代码中调用flexslider()函数，并将该div和保存有图片链接的数组作为函数参数：

var img01 = "http://image.zuchecdn.com//newversion/focusPicture/2016/20160821shangmen_web.jpg";
var img02 = "http://image.zuchecdn.com//newversion/focusPicture/2016/20160829pufa_web.jpg";
var img03 = "http://image.zuchecdn.com//newversion/focusPicture/2016/20160822nianzu_web.jpg";
var img04 = "http://image.zuchecdn.com/newversion/focusPicture/2016/20160620new150_web.jpg";
var imgss = new Array(img01,img02,img03,img04);
flexslider($("#test"),imgss,{interval:8000,fadeoutTime:500,fadeinTime:500});

flexslider函数接收三个参数。

第一个参数是一个DOM对象，必须要有，它表示函数要作用的DOM对象，指定了图片在哪个DOM元素里面展示，比如上面，将$("#test")作为第一个参数，就意味着图片在id为test的元素里面展示；

第二个参数为一个数组，也是必须要有的，该数组应包含所需展示的图片的链接地址；

第三个参数，可省略，这个参数应传入一个js对象，该对象包含的属性有interval、fadeoutTime、fadeinTime，分别表示每张图展示的时长、图片淡出耗时和图片淡入耗时，如果不规定这些属性，他们的会取默认值4000、0和500。