admin 发表于 2013-8-3 10:40:49

Jquery Mobile 图片幻灯插件 Camera

Camera插件是一个基于jquery 插件的开源项目，功能是对所有指定的图片集实现轮播的效果，在轮播过程中，用户可以查看没一张图片的主题信息，手动终止播放过程，可以查看没有涨播放的图片。主要引入camera.js就可以实现


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



基本参数$('#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;" />
    <linkhref="Css/jquery.mobile-1.0.1.min.css"
         rel="Stylesheet" type="text/css" />
    <linkhref="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张图片即可



乄丶微木 发表于 2013-8-22 15:05:03

不错不错，谢谢分享

你懂得 发表于 2013-9-29 21:59:52

沙发！沙发!

你懂得 发表于 2013-10-2 15:51:26

好好 学习了 确实不错

phonegap100 发表于 2013-10-4 21:14:31

非常感谢楼主。。。

你懂得 发表于 2013-10-6 12:01:23

帮你顶下哈！！

phonegap100 发表于 2013-10-8 02:00:48

好好 学习了 确实不错

raypublic 发表于 2013-12-5 10:47:22

看看是否好用

ymhsky 发表于 2014-1-14 11:53:04

下来试试

phonegap_Nsg 发表于 2014-2-15 11:51:33

底下那几个类似导航的点可以不显示吗？
页: [1] 2 3
查看完整版本: Jquery Mobile 图片幻灯插件 Camera