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

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

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

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

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

基本演示1：http://levi.cg.am/test/camera/demo/basic.htm
基本演示2：http://levi.cg.am/test/camera/demo/random.php
轮播图包含视频：http://levi.cg.am/test/camera/demo/features.htm
全屏展示：http://levi.cg.am/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张图片即可




    camera 插件应用程序
     
    
    
    
    
    
    
    



   幻灯图片
     
       
         
           第1 幅图片的说明文字
         
       
       
         
           第2 幅图片的说明文字
         
       
       
          
            第3 幅图片的说明文字
          
       
     
   乱炖 - 研究web http://levi.cg.am