jQuery图片3d翻转切换展示幻灯片特效-爱编程

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

来源：htmleaf 阅读：6 时间：2018-02-04 01:25

这是一款效果十分酷的jQuery图片3d翻转切换展示幻灯片特效插件。插件中精美的插图来自于花瓣。

注意：该幻灯片插件已经在Chrome, Firefox, Safari的桌面和移动设备浏览器测试通过，IE浏览器上还未做过测试。

HTML结构

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

<body>
  ..
  <div class="gallery">
    <a href="#"><img src="..."></a>
    <a href="#"><img src="..."></a>
    <a href="#"><img src="..."></a>
    <a href="#"><img src="..."></a>
    <a href="#"><img src="..."></a>
    ...
  </ul>
  ..
</body>

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

JAVASCRIPT

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

$(".gallery").flipping_gallery({
    direction: "forward",
    selector: "> a",
    spacing: 10,
    showMaximum: 15,
    enableScroll: true
});

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

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结构：

<body>
  ..
  <div class="gallery">
    <a href="#"><img data-caption="..." src="..."></a>
    <a href="#"><img data-caption="..." src="..."></a>
    <a href="#"><img data-caption="..." src="..."></a>
    <a href="#"><img data-caption="..." src="..."></a>
    <a href="#"><img data-caption="..." src="..."></a>
    ...
  </ul>
  ..
</body>

公共方法

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

$.fn.flipForward()

通过该方法你可以手动触发幻灯片向前翻转到下一张图片。
```
$(".gallery").flipForward();
                    
```
$.fn.flipBackward()

通过该方法你可以手动触发幻灯片向后翻转到前一张图片。
```
$(".gallery").flipBackward();
                    
```

在线预览源码下载