dowebok

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

分类:代码 日期: 点击(15,753) 评论(1) Loading收藏 (0)

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

演 示 下 载

简介

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

浏览器兼容

IE Edge Chrome Firefox Opera Safari
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 切换前后回调函数

演 示 下 载

GitHub 地址:https://github.com/snetman/easyfader

标签:

相关文章

发表评论