jQuery Flickerplate 幻灯片


Flickerplate 是个轻量级 jQuery 插件,大小仅为 12 kb。它允许用户点击鼠标然后转换内容,非常容易使用,响应式,支持触摸设备

在线实例

默认圆点导航位置动画方式深色主题HTML data属性

使用方法

<div class="flicker-example"> 
    <ul> 
        <li data-background="img/field.jpg"> 
            <div class="flick-title">Flickerplate</div> 
            <div class="flick-sub-text">——小巧的jQuery幻灯片插件</div> 
        </li> 
        <li data-background="img/forest.jpg"> 
            <div class="flick-title">可修改 Javascript 或 CSS</div> 
            <div class="flick-sub-text">查看参数,看看如何修改成你需要的效果</div> 
        </li> 
        <li data-background="img/frozen-water.jpg"> 
            <div class="flick-title">触摸事件</div> 
            <div class="flick-sub-text">引入 jQuery Finger 插件可支持移动设备触摸事件</div> 
        </li> 
    </ul> 
</div>
$(function() { 
    $('.flicker-example').flicker(); 
});

参数详解

参数描述默认值
arrows显示左右箭头控制true
arrows_constraint左右到头了禁止点击false
auto_flick自动播放true
auto_flick_delay自动播放间隔,以秒为单位10
block_text文字显示背景阴影true
dot_navigation显示圆点导航true
dot_alignment圆点导航位置center
flick_animation动画切换方式,可选 transition-slide、transform-slide、jquery-slide、scroller-slide 4种transition-slide

flick_position

inner_width

theme设置主题,可选 light、dark 2种light

云盘内容


 jQuery插件大全打包

HTML5+CSS3+PHP+jQuery等示例
大小
170M(300+个文件)

注意:示例只是当前的内容,【下载】的是全部jQuery插件一起打包后的文件。

下载地址