|
Camera插件是一个基于jquery 插件的开源项目,功能是对所有指定的图片集实现轮播的效果,在轮播过程中,用户可以查看没一张图片的主题信息,手动终止播放过程,可以查看没有涨播放的图片。主要引入camera.js就可以实现
下面是Jquery Mobile Camera源码下载地址
camera.zip
(1.64 MB, 下载次数: 4994)
基本参数- $('#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>phonegap100中文网</h4></div>
- </div>
- </body>
- </html>
复制代码 虽然在轮播的时候可以添加多张图片,但是在移动设备上浏览的时候建议 添加3-5张图片即可
|
|