幻灯片/轮播

jQuery图片3d翻转切换展示幻灯片特效

阿里云

jQuery图片3d翻转切换展示幻灯片特效
这是一款使用 jQuery 和 css3 制作的图片 3d 翻转切换展示幻灯片特效。该图片图片展示幻灯片特效中当鼠标点击图片时,图片以水平或垂直 3d 翻转的方式切换到下一张图片,还可以使用鼠标滚轮来前后切换图片。

HTML 结构:

首先,要使用这个幻灯片插件,需要在 html 的头部引入 jQuery 和 jQuery.flipping_gallery.js 以及 flipping_gallery.css 文件。

也想出现在这里?联系我们
创客主机
  1. <body>
  2.   ..
  3.   <div class="gallery">
  4.     <a href="#"><img src="..."></a>
  5.     <a href="#"><img src="..."></a>
  6.     <a href="#"><img src="..."></a>
  7.     <a href="#"><img src="..."></a>
  8.     <a href="#"><img src="..."></a>
  9.     ...
  10.   </ul>
  11.   ..
  12. </body>

你可以随意添加 N 张你喜欢的图片。该插件会让你选择你想显示多少张图片,不会照成溢出问题。

JAVASCRIPT 代码:

通过下面的 jQuery 代码来调用幻灯片插件:

  1. $(".gallery").flipping_gallery({
  2.     direction: "forward",
  3.     selector: "> a",
  4.     spacing: 10,
  5.     showMaximum: 15,
  6.     enableScroll: true
  7. });

该幻灯片插件将自动检测所有的图片,将它们以栈的方式存放。下面是一些可用参数:

direction:该参数用于决定用户点击图片时图片翻转的前后方向。可选值为:“forward” 和 “backward”。默认值为“forward”

selector:如果你不想通过 a 标签来包裹图片,可以通过该参数来自定义选择器。该参数可以使用通用的 CSS 选择器。默认值为“ > a ”

spacing:该参数用于设置图片堆叠时前后的间距(使用像素为单位)。默认值为 10

showMaximum:该参数用于设置你想显示的图片的数量。默认值为 15 张

enableScroll:该参数用于设置是否可以通过鼠标滚轮来前后导航。默认值为 true

flipDirection:该参数用于设置卡片翻转的方向。可选项为:“left”, “right”, “top” 或 “bottom”。默认值为“bottom”

autoplay:该参数用于设置该幻灯片插件是否自动播放。如果设置为 500,表示每 500 毫秒翻转一次图片,设置为 0 或 false 表示不自动播放。默认值为 false

为显示的图片添加标题,对于当前翻转的图片,你可以通过 data-caption 实现来为它添加一个标题。如下所示的 html 结构:

  1. <body>
  2.   ..
  3.   <div class="gallery">
  4.     <a href="#"><img data-caption="..." src="..."></a>
  5.     <a href="#"><img data-caption="..." src="..."></a>
  6.     <a href="#"><img data-caption="..." src="..."></a>
  7.     <a href="#"><img data-caption="..." src="..."></a>
  8.     <a href="#"><img data-caption="..." src="..."></a>
  9.     ...
  10.   </ul>
  11.   ..
  12. </body>

公共方法:

有时候你可能需要两个前后导航按钮来方便用户操作,这里有两个公共方法让你可以按照自己的方式控制幻灯片。

  1. $.fn.flipForward()

通过该方法你可以手动触发幻灯片向前翻转到下一张图片。

  1. $(".gallery").flipForward();
  2.     $.fn.flipBackward()

通过该方法你可以手动触发幻灯片向后翻转到前一张图片。

  1. $(".gallery").flipBackward();

jQuery 图片 3d 翻转切换展示幻灯片特效

已有 362 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(1)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!