|
|
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>
|
|
/1 
发表于 2013-8-3 10:40:49
收藏
转播
淘帖
发表于 2017-5-19 11:03:52
