PhoneGap中文网

 找回密码
 立即注册
查看: 105035|回复: 25
打印 上一主题 下一主题

Jquery Mobile 图片幻灯插件 Camera

[复制链接]

493

主题

2035

帖子

6894

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
6894
跳转到指定楼层
楼主
发表于 2013-8-3 10:40:49 | 只看该作者 |只看大图 回帖奖励 |倒序浏览 |阅读模式
Camera插件是一个基于jquery 插件的开源项目,功能是对所有指定的图片集实现轮播的效果,在轮播过程中,用户可以查看没一张图片的主题信息,手动终止播放过程,可以查看没有涨播放的图片。主要引入camera.js就可以实现


下面是Jquery Mobile Camera源码下载地址

camera.zip (1.64 MB, 下载次数: 4994)

基本参数
  1. $('#camera_wrap').camera({

  2. height: '400px',

  3. loader: 'bar',

  4. pagination: false,

  5. thumbnails: true

  6. });
复制代码
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>camera 插件应用程序</title>
  5.     <meta name="viewport" content="width=device-width,
  6.           initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
  7.     <link  href="Css/jquery.mobile-1.0.1.min.css"
  8.            rel="Stylesheet" type="text/css" />
  9.     <link  href="Css/Css6.2/camera.css"
  10.            rel="Stylesheet" type="text/css" />
  11.     <script src="Js/jquery-1.6.4.js"
  12.            type="text/javascript"></script>
  13.     <script src="Js/jquery.mobile-1.0.1.js"
  14.            type="text/javascript"></script>
  15.     <script src="Js/Js6.2/jquery.easing.1.3.js"
  16.            type="text/javascript"></script>
  17.     <script src="Js/Js6.2/camera.min.js"
  18.            type="text/javascript"></script>
  19.     <script type="text/javascript">
  20.         $(function() {
  21.             $('#camera_wrap_1').camera({
  22.             time: 1000,
  23.                 thumbnails:false
  24.             })
  25.         });
  26.     </script>
  27. </head>
  28. <body>
  29. <div data-role="page">
  30.    <div data-role="header"><h1>幻灯图片</h1></div>
  31.      <div class="camera_wrap camera_azure_skin" id="camera_wrap_1">
  32.        <div data-thumb="Images/Img6.2/thumb/list_1.jpg"
  33.             data-src="Images/Img6.2/list_1.jpg">
  34.          <div class="camera_caption fadeFromBottom">
  35.            第<em>1</em> 幅图片的说明文字
  36.          </div>
  37.        </div>
  38.        <div data-thumb="Images/Img6.2/thumb/list_2.jpg"
  39.             data-src="Images/Img6.2/list_2.jpg">
  40.          <div class="camera_caption fadeFromBottom">
  41.            第<em>2</em> 幅图片的说明文字
  42.          </div>
  43.        </div>
  44.        <div data-thumb="Images/Img6.2/thumb/list_3.jpg"
  45.             data-src="Images/Img6.2/list_3.jpg">
  46.           <div class="camera_caption fadeFromBottom">
  47.             第<em>3</em> 幅图片的说明文字
  48.           </div>
  49.        </div>
  50.      </div>
  51.    <div data-role="footer"><h4>phonegap100中文网</h4></div>
  52. </div>
  53. </body>
  54. </html>
复制代码
虽然在轮播的时候可以添加多张图片,但是在移动设备上浏览的时候建议 添加3-5张图片即可



it营
回复

使用道具 举报

0

主题

2

帖子

13

积分

新手上路

Rank: 1

积分
13
沙发
发表于 2013-8-22 15:05:03 | 只看该作者

回帖奖励 +1

不错不错,谢谢分享
it营
回复 支持 反对

使用道具 举报

23

主题

141

帖子

260

积分

中级会员

Rank: 3Rank: 3

积分
260
板凳
发表于 2013-9-29 21:59:52 | 只看该作者
沙发!沙发!
回复 支持 反对

使用道具 举报

23

主题

141

帖子

260

积分

中级会员

Rank: 3Rank: 3

积分
260
地板
发表于 2013-10-2 15:51:26 | 只看该作者
好好 学习了 确实不错
回复 支持 反对

使用道具 举报

0

主题

108

帖子

116

积分

注册会员

Rank: 2

积分
116
5#
发表于 2013-10-4 21:14:31 | 只看该作者
非常感谢楼主。。。
回复 支持 反对

使用道具 举报

23

主题

141

帖子

260

积分

中级会员

Rank: 3Rank: 3

积分
260
6#
发表于 2013-10-6 12:01:23 | 只看该作者
帮你顶下哈!!
回复 支持 反对

使用道具 举报

0

主题

108

帖子

116

积分

注册会员

Rank: 2

积分
116
7#
发表于 2013-10-8 02:00:48 | 只看该作者
好好 学习了 确实不错
回复 支持 反对

使用道具 举报

0

主题

7

帖子

46

积分

新手上路

Rank: 1

积分
46
8#
发表于 2013-12-5 10:47:22 | 只看该作者
看看是否好用
回复 支持 反对

使用道具 举报

0

主题

13

帖子

54

积分

注册会员

Rank: 2

积分
54
10#
发表于 2014-2-15 11:51:33 | 只看该作者
底下那几个类似导航的点可以不显示吗?
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐 上一条 /1 下一条

ionic4视频教程

Archiver|手机版|小黑屋| PhoneGap中文网 ( 京ICP备13027796号-1 )  

GMT+8, 2024-11-5 21:45 , Processed in 0.073844 second(s), 39 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表