IT博客汇 | 兼容移动端的轮播插件

兼容移动端的轮播插件 – Camera

李惟发表于 2015-06-15 11:17:30

自此之前写了一篇关于移动端触屏事件的文章，感兴趣的童鞋，可以【点击此处查看原文】，不过由于Android各个机型都不一致，会存在问题，为了更方便在生产环境使用，在这里我介绍一款现成的轮播插件：camera，兼容性很好，兼容各大浏览器。

这里有几个DEMO，大家可点击查看下（可以使用手机访问以下地址）：

基本演示1：http://levi.yii.so/test/camera/demo/basic.htm
基本演示2：http://levi.yii.so/test/camera/demo/random.php
轮播图包含视频：http://levi.yii.so/test/camera/demo/features.htm
全屏展示：http://levi.yii.so/test/camera/demo/fullscreen.htm

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

Camera官方网站：http://www.pixedelic.com/plugins/camera
演示项目打包：http://pan.baidu.com/s/1hq6bevU

基本参数：

$('#camera_wrap').camera({
    height: '400px',
    loader: 'bar',
    pagination: false,
    thumbnails: true
});

虽然在轮播的时候可以添加多张图片，但是在移动设备上浏览的时候建议添加3-5张图片即可

<!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>乱炖 - 研究web http://levi.yii.so</h4></div>
</div>
</body>
</html>

您可能也喜欢：
Node.js开发指南——第3章安装Node.js快速入门(一)	初识 jQuery Deferred	linux使用crontab实现PHP执行定时任务	WEB前端底层知识--浏览器是如何工作的	240多个jQuery插件功能强大齐全
无觅