jQuery Flipping Gallery是一款支持鼠标滚动的翻转插件,效果有点类似翻牌动作。支持自定义分页、鼠标开启、自动播放等。
引入 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="http://www.sucaihuo.com/jquery/demo/6/630/index2.html">翻转方向向右</a>
$(".gallery").flipping_gallery({
flipDirection: "right",
enableScroll: "false"
});
演示三:<a href="http://www.sucaihuo.com/jquery/demo/6/630/index3.html">开启鼠标滚动</a>
$(".gallery").flipping_gallery({
enableScroll: true
});
演示四:<a href="http://www.sucaihuo.com/jquery/demo/6/630/index4.html">自动播放</a>
$(".gallery").flipping_gallery({
enableScroll: true,
autoplay: 500 //间隔时间 单位:毫秒
});
演示五:<a href="http://www.sucaihuo.com/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;
});
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791