Flickerplate演示5种幻灯片轮播效果

查看演示 下载资源 下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

HTML

首先在.flicker-example放置多个带有图片、标题和描述的ul列表

<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>

引入jQuery库和flickerplate相关插件

<script src="jquery.js"></script>
<script src="js/modernizr-custom-v2.7.1.min.js"></script>
<script src="js/jquery-finger-v0.1.0.min.js"></script>
<script src="js/flickerplate.min.js"></script>

演示一：默认效果

$(function() {
    $('.flicker-example').flicker();
});

演示二：设置圆点导航位置

$('.flicker-example').flicker({
    dot_alignment: 'right',
    block_text: false //文字显示背景阴影
});

演示三：动画切换方式

$('.flicker-example').flicker({
    flick_animation: 'jquery-slide',
    block_text: false
});

演示四：更改主题

$('.flicker-example').flicker({
    theme: 'dark'
});

演示五：设置HTML data属性

<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>

$(function() {
    $('.flicker-example').flicker();
});