jQuery Flipping Gallery翻转画廊插件

收藏

jQuery Flipping Gallery是一款支持鼠标滚动的翻转插件，效果有点类似翻牌动作。支持自定义分页、鼠标开启、自动播放等。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

引入 Flipping Gallery 翻转画廊插件

<link rel="stylesheet" type="text/css" href="css/flipping_gallery.css" />
<script type="text/javascript" src="js/jquery.flipping_gallery.js"></script>

图片画廊html代码

<div class="gallery">
    <a href="#"><img src="img/1.jpg"></a>
    <a href="#"><img src="img/2.jpg"></a>
    <a href="#"><img src="img/3.jpg"></a>
</div>

演示一：简单配置

$(".gallery").flipping_gallery({
    enableScroll: false //关闭鼠标滚动
});

演示二：翻转方向向右

$(".gallery").flipping_gallery({
    flipDirection: "right",
    enableScroll: "false"
});

演示三：开启鼠标滚动

$(".gallery").flipping_gallery({
    enableScroll: true
});

演示四：自动播放

$(".gallery").flipping_gallery({
    enableScroll: true,
    autoplay: 500 //间隔时间 单位：毫秒
});

演示五：绑定事件

$(".gallery").flipping_gallery({
    enableScroll: true
});
$(".next").click(function() {
    $(".gallery").flipForward();
    return false;
});
$(".prev").click(function() {
    $(".gallery").flipBackward();
    return false;
});