Jquery Mobile 图片幻灯插件 Camera
作者:本站编辑 发布时间:2015-11-24 来源:本站原创
点击数:
基本参数
$('#camera_wrap').camera({
height: '400px',
loader: 'bar',
pagination: false,
thumbnails: true
});
<!DOCTYPE html>
<html>
<head>
<title>camera 插件应用程序</title>
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
<link href="Css/jquery.mobile-1.0.1.min.css"
rel="Stylesheet" type="text/css" />
<link href="Css/Css6.2/camera.css"
rel="Stylesheet" type="text/css" />
<script src="Js/jquery-1.6.4.js"
type="text/javascript"></script>
<script src="Js/jquery.mobile-1.0.1.js"
type="text/javascript"></script>
<script src="Js/Js6.2/jquery.easing.1.3.js"
type="text/javascript"></script>
<script src="Js/Js6.2/camera.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#camera_wrap_1').camera({
time: 1000,
thumbnails:false
})
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header"><h1>幻灯图片</h1></div>
<div class="camera_wrap camera_azure_skin" id="camera_wrap_1">
<div data-thumb="Images/Img6.2/thumb/list_1.jpg"
data-src="Images/Img6.2/list_1.jpg">
<div class="camera_caption fadeFromBottom">
第<em>1</em> 幅图片的说明文字
</div>
</div>
<div data-thumb="Images/Img6.2/thumb/list_2.jpg"
data-src="Images/Img6.2/list_2.jpg">
<div class="camera_caption fadeFromBottom">
第<em>2</em> 幅图片的说明文字
</div>
</div>
<div data-thumb="Images/Img6.2/thumb/list_3.jpg"
data-src="Images/Img6.2/list_3.jpg">
<div class="camera_caption fadeFromBottom">
第<em>3</em> 幅图片的说明文字
</div>
</div>
</div>
<div data-role="footer"><h4></h4></div>
</div>
</body>
</html>