php幻灯片的插件,jQuery幻灯片插件Flickerplate

简介

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

兼容

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

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

使用方法

1、引入文件

2、HTML

• Flickerplate
  ——小巧的jQuery幻灯片插件
• 可修改 Javascript 或 CSS
  查看参数，看看如何修改成你需要的效果
• 触摸事件
  引入 jQuery Finger 插件可支持移动设备触摸事件

除了 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'

});

});

配置属性/方法类型默认值说明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动画切换方式，可选 transition-slide、transform-slide、jquery-slide、scroller-slide 4种

flick_position整数1

inner_width布尔值false

theme字符串light设置主题，可选 light、dark 2种