jQuery |翻转图库插件
jQuery 提供了一个简单、美观和交互式的翻转画廊插件,它可以帮助程序员使用自动播放功能在不同方向翻转画廊中的许多图像。该插件是通过使用 HTML 标记和简单的 javascript函数调用来实现的。
请在您的工作文件夹中下载翻转画廊插件,并将所有相关文件包含在您的登陆网页的头部部分。
下载链接: https : //github.com/peachananr/flipping_gallery
示例 1:在以下程序中,显示了简单调用flipping_gallery()函数的基本用法。提供上一个和下一个按钮用于处理向前或向后移动的翻转图像。
jQuery Flipping Gallery Plugin
html
{
height: 90%;
}
body
{
padding: 0;
text-align: center;
font-family: 'open sans';
position: relative;
margin: 0;
height: 80%;
}
.wrapper
{
height: auto !important;
height: 60%;
margin: 0 auto;
overflow: hidden;
}
a
{
text-decoration: none;
}
.btn
{
display: inline-block;
border: 4px solid black;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background: green;
display: inline-block;
line-height: 100%;
padding: 0.6em;
text-decoration: none;
color: #0d2633;
width: 100px;
line-height: 100%;
font-size: 14px;
font-family: open sans;
font-weight: bold;
border: none;
margin-left: 10px;
}
.btns {
width: 200px;
margin: 20px auto;
}
.page-container {
max-width: 700px;
margin: auto;
position: relative;
}
.gallery {
height: 300px;
width: 500px;
margin: 150px auto 100px;
}
img
{
border : 1px solid black;
}
$(document).ready( function() {
$(".gallery").flipping_gallery();
$(".next").click(function() {
$(".gallery").flipForward();
return false;
});
$(".prev").click(function() {
$(".gallery").flipBackward();
return false;
});
});
GeeksForGeeks - jQuery Flipping gallery
Previous
Next
输出 :
例2:在下面的程序中,各种选项的设置是通过javascript函数调用实现的。程序员可以根据应用的需要使用各种选项。请阅读每个选项值的注释并相应地使用。程序员可以利用data-caption属性来添加字幕。
jQuery Flipping Gallery Plugin
html
{
height: 90%;
}
body
{
padding: 0;
text-align: center;
font-family: 'open sans';
position: relative;
margin: 0;
height: 80%;
}
.wrapper
{
height: auto !important;
height: 60%;
margin: 0 auto;
overflow: hidden;
}
a
{
text-decoration: none;
}
.btn
{
display: inline-block;
border: 4px solid black;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background: green;
display: inline-block;
line-height: 100%;
padding: 0.6em;
text-decoration: none;
color: #0d2633;
width: 100px;
line-height: 100%;
font-size: 14px;
font-family: open sans;
font-weight: bold;
border: none;
margin-left: 10px;
}
.btns {
width: 200px;
margin: 20px auto;
}
.page-container {
max-width: 700px;
margin: auto;
position: relative;
}
.gallery {
height: 310px;
width: 500px;
margin: 150px auto 100px;
}
img
{
border : 1px solid black;
}
.navigation {
margin-bottom: 150px;
}
$(document).ready( function() {
$(".gallery").flipping_gallery({
/* The options for the flipping direction are "forward", or
"backward". Default value is forward.*/
direction: "forward",
// Default selector is set for generation of the gallery.
selector: "> a",
/* Spacing between each photo in pixels in the gallery.
Default value is 10.*/
spacing: 20,
// Limit the number of photos in the viewport.
showMaximum: 5,
// Set the scrolling behavior. Default value is true.
enableScroll: true,
/* Direction to flip picture. Options are "left",
"right", "top", "bottom". Default value is bottom.*/
flipDirection: "left",
// Autoplay time interval. Default value is false.
autoplay: 1200
});
$(".next").click(function() {
$(".gallery").flipForward();
return false;
});
$(".prev").click(function() {
$(".gallery").flipBackward();
return false;
});
});
GeeksForGeeks - jQuery Flipping gallery
Previous
Next
输出:
在下面的脚本中,显示了在顶部方向翻转的选项设置。程序员也可以类似地利用其他选项以及不同的翻转选项。
$(document).ready( function() {
$(".gallery").flipping_gallery({
flipDirection: "top",
autoplay: false
});
});
输出: