首页大图淡入淡出效果工具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。

 

posted @ 2016-09-25 23:02 dige1993 Views(...) Comments(...) Edit 收藏