jQuery Flickerplate 幻灯片

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

在线实例

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

使用方法

  1. <div class="flicker-example">
  2. <ul>
  3. <li data-background="img/field.jpg">
  4. <div class="flick-title">Flickerplate</div>
  5. <div class="flick-sub-text">——小巧的jQuery幻灯片插件</div>
  6. </li>
  7. <li data-background="img/forest.jpg">
  8. <div class="flick-title">可修改 Javascript 或 CSS</div>
  9. <div class="flick-sub-text">查看参数，看看如何修改成你需要的效果</div>
  10. </li>
  11. <li data-background="img/frozen-water.jpg">
  12. <div class="flick-title">触摸事件</div>
  13. <div class="flick-sub-text">引入 jQuery Finger 插件可支持移动设备触摸事件</div>
  14. </li>
  15. </ul>
  16. </div>

复制

  1. $(function() {
  2. $(‘.flicker-example‘).flicker();
  3. });

复制

参数详解

参数 描述 默认值
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
下载

时间： 2024-10-12 03:57:26

jQuery Flickerplate 幻灯片的相关文章

jQuery orbit 幻灯片

在线实例 默认 带缩略图 带描述 使用方法 <div class="wrap" style="width: 565px; height: 290px; margin: 0 auto;"> <div id="featured"> <a class="orbit-item" href="#" data-caption="#htmlCaption1"><

【jquery】幻灯片效果

闲着无聊,用Jquery写了一个幻灯片效果. 我这人喜欢造轮子,除了jquery这种有强大开发团队的框架级别JS,其实的一些小程序都是尽量自己写. 一是因为怕出问题了没人问,二是自己写的改起来也方便. 效果可参考: http://www.helloweba.com/demo/supersized/ 只是上面这个DEMO用的是supersized,功能比较强大,就是代码加密过了,读起来很困难. 废话不说,代码放上. CSS: img.slider-image { position:absolute

jquery实现幻灯片

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>gakki</title> <style type="text/css"> *{ margin: 0; padding: 0; } html, body{ position: relative; width: 100%; height: 100%; } #wrap{

使用JQuery制作幻灯片(轮播图）

1.首先看一下目录结构 images文件夹放所需要播放的图片. js文件夹放jquery库和main.js 2.html代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>JQuery slideShow</title> 6 <style> 7 *{margin: 0;

jquery roundabout幻灯片插件3d图片切换支持图片旋转切换滚动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

100+经典常用的jQuery插件大全实例演示和下载

jQuery 表单插件 jQuery cxCalendar 日期选择器 jQuery cxColor 颜色选择器 jQuery cxSelect 联动下拉菜单 jQuery Validation Engine 表单验证 jQuery soColorPacker 网页拾色器 jQuery AutoComplete 自动补全 jQuery uploadify 文件上传 jQuery FileUpload 文件上传 jQuery LayDate 日期控件 jQuery ClockPicker 圆形时钟

基于bootstrup的jQuery超酷hero幻灯片特效

bpHS是一款基于bootstrup的炫酷jQuery hero幻灯片插件.该幻灯片插件小巧实用,可以通过data属性来设置幻灯片的动画效果,还提供了许多参数用于控制幻灯片. 在线演示:http://www.htmleaf.com/Demo/201502201398.html 下载地址:http://www.htmleaf.com/jQuery/Slideshow-Scroller/201502201397.html

jQuery幻灯片插件autoPic

原文地址:Jquery自定义幻灯片插件 插件效果图: 演示地址:autoPic项目地址:autoPic 欢迎批评指正!

10个Jquery幻灯片插件教程

当有大量的内容或者图片需要在你的网站或者BLOG上展示的时候,以幻灯片滑动的方式是一个不错的选择,这种效果常用于公司网站或者个人BLOG.常听有人说jquery 比较难学,只要你感兴趣,实现幻灯片效果还是蛮有乐趣的,下面的Jquery 幻灯片教程将引领你进入Jquery插件开发的喜悦中,希望对大家有帮助. 1. jQuery Easy Slides v1.1 在所有的Jquery幻灯片插件中,Jquery easy sildes算是最容易使用的一个. 2. The Piecemaker XML