[代码样式]jQuery幻灯片插件Flickerplate

简介

Flickerplate 是一个基于 jQuery 的幻灯片插件，压缩后仅 6KB。它支持左右箭头控制、圆点导航、自动播放、主题设置、HTML data 属性等等。

兼容

浏览器兼容：Flickerplate 使用了 CSS3 属性，所以只兼容 IE10 及以上版本和其他主流现代浏览器，IE 低版本效果欠佳，但可正常使用。

jQuery 兼容：兼容 1.7 及以上版本。

使用方法

1、引入文件

<link href="https://www.dowebok.com/css/flickerplate.css" rel="external nofollow"  rel="stylesheet">
<script src="https://www.dowebok.com/js/jquery.min.js"></script>
<script src="https://www.dowebok.com/js/modernizr-custom-v2.7.1.min.js"></script>
<script src="https://www.dowebok.com/js/jquery-finger-v0.1.0.min.js"></script>
<script src="https://www.dowebok.com/js/flickerplate.min.js"></script>

2、HTML

<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 必引用外，Modernizr（modernizr-custom-v2.7.1.min.js）也是必须的，Modernizr 是一个 HTML5/CSS3 功能检测库。jQuery.Finger（jquery-finger-v0.1.0.min.js）是一个触摸事件插件，如果不需要支持移动设备，可去掉。

3、JavaScript

$(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',
flick_position: 1,
inner_width: false,
theme: 'light'
});
});

配置

百度网盘" name="jQuery幻灯片插件Flickerplate" pass="" code=""]