纯JS和CSS3超酷3D翻转式幻灯片插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

3D-Flip-Slider是一款纯JS和CSS3超酷3D翻转式幻灯片插件。该幻灯片在点击前后按钮时，图片或幻灯片内容以3D翻转的方式进行切换。该3D翻转幻灯片的特点还有：

纯JavaScript，不依赖jQuery库。
轻量级，压缩版本只有2.5kb。
支持图片和任何HTML内容。
性能优化，支持IE10+浏览器。
可通过外部元素来触发前后导航事件。

使用方法

在页面中引入flipslide.js和flipslide.css文件。

<link rel="stylesheet" href="path/to/flipslide.css">
<script src="dist/flipslide.js"></script>

HTML结构

该3D翻转幻灯片的基本HTML结构如下：

<div class="flip-slider">
  <div class="flip-frame">
    <div class="flip">
      <div class="slide"><img src="images/1.jpg" alt="" /></div>
      <div class="slide"><img src="images/2.jpg" alt="" /></div>
      <div class="slide"><img src="images/3.jpg" alt="" /></div>
      <div class="slide"><img src="images/4.jpg" alt="" /></div>
      <div class="slide"><img src="images/5.jpg" alt="" /></div>
      <div class="slide color">
        <h1>Slide Title</h1>
        <b>HTML Page</b> <i>Content</i>
      </div>
    </div>
  </div>
  <div class="nav">
    <button class="prev">Previous</button>
    <button class="next">Next</button>
  </div>
</div>

初始化插件

可以通过new FlipSlider()来实例化幻灯片对象。

var flip1 = new FlipSlider({
    startIndex: 3,
    container: document.querySelector(".flip-slider")
});
//或者
var flip2 = new FlipSlider({
    container: document.getElementById("#flipSlider2")
});

绑定触发事件

方法一：在元素上绑定事件。

// Binding Previous Event
document.querySelector("#flipPrevious").onclick = flip1.prevFlip;
// Binding Next Event
document.querySelector("#flipNext").onclick = flip1.nextFlip;

方法二：通过JS来触发事件。

flip1.prevFlip(); // Trigger Previous Event
flip1.nextFlip(); // Trigger Next Event

方法三：在标签上通过内联的方式来绑定事件：

<p><b onclick="flip1.prevFlip();">Click here</b> to flip Previous the slider</p>
<p><b onclick="flip1.nextFlip();">Click here</b> to flip next the slider</p>

3D-Flip-Slider幻灯片插件的github地址为：https://github.com/ashishkumar-ui/3D-Flip-Slider