这是一款效果炫酷的 jQuery 和 CSS3 翻页效果幻灯片插件。该插件使用了jQuery来激活 CSS 3D transforms 来制作翻页特效，

HTML结构

HTML结构比较简单，div.content是可选的。

<div id="flipbook">
  <div class="slide">
    <img src="images/1.jpg" alt="" /> 
    <div class="content"><a href="#">Flowers: What you didn't know</a></div> 
  </div>
  <div class="slide">
    <img src="images/2.jpg" alt="" /> 
    <div class="content"><a href="#">Flowers: Real or Fiction?</a></div> 
  </div>
  <div class="slide">
    <img src="images/3.jpg" alt="" /> 
    <div class="content"><a href="#">A Flower ate my Baby!</a></div> 
  </div>
  <div class="slide">
    <img src="images/4.jpg" alt="" /> 
    <div class="content"><a href="#">Will Flowers Destroy Earth?</a></div>
  </div>
</div>

实际上我们没有使用图片，而是通过CSS来分割它们。你看到的图片实际上是隐藏的，然后用CSS将它们做成背景图片，以便我们操纵它们。

插件中使用了Modernizr来处理css 3D transforms，这样即使在IE8下也可以看到效果。

JAVASCRIPT

在引入jQuery和jquery.pictureflip.js文件后，可以如下调用插件：

<script type="text/javascript">
  $(document).ready(function() {
    $('#flipbook').pageFlip({
      time : 2,
      shadow : false,
      slideTime: 0.3,
      autoRun: true,
      autoTime: 4
    });
  });
</script>

也可以使用默认参数：

<script type="text/javascript">
  $(document).ready(function() {
    $('#flipbook').pageFlip();
  });
</script>

可用参数：

该翻页效果有一些参数可以使用：

  • time ：翻页动画的时间，单位为秒，默认值为1秒。
  • shadow ：是否开启翻页动画时的阴影效果，可以设置为true或false，默认值为true。（可能会引起一些性能问题）
  • slideTime ：标题滑块升起的时间。默认值为0.1秒。
  • autorun ：是否自动播放幻灯片。默认值为false。
  • autoTime ：设置自动播放幻灯片时的图片切换时间。默认值为5秒。你可以设置它为false。