引入 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 //关闭鼠标滚动
});

演示二：<a href="https://jy.tp.yuanmeng.life/jquery/demo/6/630/index2.html">翻转方向向右</a>

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

演示三：<a href="https://jy.tp.yuanmeng.life/jquery/demo/6/630/index3.html">开启鼠标滚动</a>

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

演示四：<a href="https://jy.tp.yuanmeng.life/jquery/demo/6/630/index4.html">自动播放</a>

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

演示五：<a href="https://jy.tp.yuanmeng.life/jquery/demo/6/630/index5.html">绑定事件</a>

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