EasyFader – jQuery轻量级响应式幻灯片插件

分类：代码日期：2016-12-20

简介

EasyFader 是一款轻量级的响应式幻灯片插件，Gzip 压缩之后之后仅 1.5 KB。因为 EasyFader 是轻量级的，所以它并没有太多花哨的功能，但幻灯片的基本功能是一个都不少的，比如箭头控制、项目导航、切换间隔、切换动画持续时间、回调函数等。

浏览器兼容


IE9+	Edge	Chrome	Firefox	Opera	Safari

使用方法

1、引入文件

<link rel="stylesheet" href="css/jquery.easyfader.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.easyfader.min.js"></script>

2、HTML

<div id="dowebok" class="fader">
    <img class="slide" src="images/img1.jpg">
    <img class="slide" src="images/img2.jpg">
    <img class="slide" src="images/img3.jpg">
    <div class="fader_controls">
        <div class="page prev" data-target="prev">&lsaquo;</div>
        <div class="page next" data-target="next">&rsaquo;</div>
        <ul class="pager_list"></ul>
    </div>
</div>

3、JavaScript

$(function() {
    $('#dowebok').easyFader();
});

配置

属性

名称	类型	默认值	说明
slideDur	整数	7000	切换间隔，以毫秒为单位
fadeDur	整数	inline	动画持续时间
onFadeStart		null	切换前的回调函数
onFadeEnd		null	切换前后回调函数