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种

php幻灯片的插件,jQuery幻灯片插件Flickerplate相关推荐

SlidesJS基本使用方法和官方文档解释【Jquery幻灯片插件 Jquery相册插件】
SlidesJS基本使用方法和官方文档解释 [Jquery幻灯片插件 Jquery相册插件] 标签: jquery文档functionstringdiv相册 2012-04-19 15:23 3931 ...
jquery php 分页插件,jQuery 分页插件代码
jQuery 分页插件代码 js代码 var newlist = new Vue({ el: '#app', data: { current_page: 1, //当前页 pages: 50, //总 ...
html ppt 插件,jquery幻灯片插件slidr.js
插件描述:一个简单的,轻量级的JavaScript库添加幻灯片切换到您的网页,无依赖. 特点添加尽可能多的Slidr的,只要你想. 动态调整大小 - 适应其内容的大小,除非你不想要它. 键盘导航 ...
php旅游网站景区天气插件,jquery天气插件
插件描述:一个简单的jQuery插件可以显示当前的天气信息,使用雅虎天气的任何位置. 一个简单的jQuery插件可以显示当前的天气信息,使用雅虎天气的任何位置.开发者James Fleeting.下载 ...
html5 新手引导插件,jQuery引导插件intro.js
插件描述:intro.js分步导航 ======================以下内容由苍白提供===================== 设置参数: 设置多个格式 json格式: key:va ...
jQuery插件 -- jQuery UI插件
jQuery UI 主要分为3个部分: 交互.微件和效果库交互:这里都是一些与鼠标交互相关的内容.包括拖动(Draggable).置放(Doppable).缩放(Resizable).选择(Sele ...
php jq截图插件,jQuery jcrop插件截图使用方法_jquery
在后台来进行图片切割. 头像截取的原理:在前台使用jcrop获取切面的x轴坐标.y轴坐标.切面高度.切面宽度,然后将这四个值传给后台.在后台要进行放大处理:将切面放大N倍,N=原图/前台展示的头像. ...
html怎么引入圆角插件,jQuery圆角插件demo页面张鑫旭-鑫空间-鑫生活
Auto-Ready! 一.可用的模式默认的圆角样式表现round Round $(this).corner(); Bevel $(this).corner("bevel"); ...
jquery 幻灯片左右滚动
使用jquery封装的一个幻灯片插件写的好差参考了别人写的后面再重构现在这个应该可以直接用了主要实现思路就是添加当前选中状态 index相对应的选中的图总是在第一位(也就是加选中状态的 ...

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

php幻灯片的插件,jQuery幻灯片插件Flickerplate相关推荐

最新文章

热门文章