幻灯片/轮播
jQuery和css3翻页效果幻灯片插件
PetitQ
这是一款效果炫酷的 jQuery 和 CSS3 翻页效果幻灯片插件。该翻页效果幻灯片在切换图片的时候图片就像书本翻页一样。可以设置为自动播放模式和手动播放模式。
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
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
