PhoneGap中文网

标题: Jquery Mobile 图片幻灯插件 Camera [打印本页]
作者: admin    时间: 2013-8-3 10:40
标题: Jquery Mobile 图片幻灯插件 Camera
Camera插件是一个基于jquery 插件的开源项目，功能是对所有指定的图片集实现轮播的效果，在轮播过程中，用户可以查看没一张图片的主题信息，手动终止播放过程，可以查看没有涨播放的图片。主要引入camera.js就可以实现


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

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

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

  3. height: '400px',

  5. loader: 'bar',

  7. pagination: false,

  9. thumbnails: true

  11. });
复制代码
  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张图片即可



作者: 乄丶微木    时间: 2013-8-22 15:05
不错不错，谢谢分享
作者: 你懂得    时间: 2013-9-29 21:59
沙发！沙发!
作者: 你懂得    时间: 2013-10-2 15:51
好好 学习了 确实不错
作者: phonegap100    时间: 2013-10-4 21:14
非常感谢楼主。。。
作者: 你懂得    时间: 2013-10-6 12:01
帮你顶下哈！！
作者: phonegap100    时间: 2013-10-8 02:00
好好 学习了 确实不错
作者: raypublic    时间: 2013-12-5 10:47
看看是否好用
作者: ymhsky    时间: 2014-1-14 11:53
下来试试
作者: phonegap_Nsg    时间: 2014-2-15 11:51
底下那几个类似导航的点可以不显示吗？
作者: sdfsdf    时间: 2014-4-29 18:08
灰常谢谢楼主分享
作者: tangyunfei    时间: 2014-5-14 20:54
jquery-1.9.1 + jquery.mobile-1.4.2下无效 怎么搞得 按照DEMO配置的
作者: mikesdh    时间: 2014-6-10 15:52
不错正要学习caramel
作者: mikesdh    时间: 2014-6-10 15:53
不错正要学习它
作者: lixing    时间: 2014-6-11 09:31
学习下。。。。。。。。。。。。
作者: tl110110tl    时间: 2014-6-24 09:21
mark一下
作者: U_can    时间: 2014-9-25 13:11
如果我换成jQuery Mobile 1.4.4和jQuery1.11.1版本就不行了，能有什么解决办法吗？
作者: pandaogod8    时间: 2015-5-5 10:36
看了树根儿老师的视频, 才来下载的. 哈哈不错
作者: pg317003440    时间: 2015-6-24 23:10
太牛B了  威武 霸气！
作者: 1302735861    时间: 2015-7-3 11:32
有没有更详细的API啊？
作者: 1302735861    时间: 2015-7-3 11:34

这个也太粗略了，需要整合开发更多的功能，跪求API
作者: huangruixin    时间: 2015-8-14 17:40
学习了，谢谢楼主分享
作者: yaomengxin    时间: 2015-10-19 21:40
这个放在Xcode里没有用
作者: weituotian    时间: 2016-3-17 20:19
有用啊
作者: 竹言墨语    时间: 2017-5-19 11:03
效果挺不错的！
作者: 竹言墨语    时间: 2017-5-19 11:03
效果挺不错 的！



欢迎光临 PhoneGap中文网 (http://bbs.phonegap100.com/) Powered by Discuz! X3.2