Camera 幻灯片播放与轮播有些类似，不同的是在camera 幻灯片播放时有很多很炫很酷的播放效果 ：

　　简单的介绍Camera 插件的使用方式：

　　　　1、引入js：

<script src="jquery.min.js"></script>

<script type="text/javascript" src="jquery.easing.1.3.js"></script>

<script type="text/javascript" src="camera.min.js"></script>

　　注意：这里的jquery的版本是jQuery v1.7.1 也就是说版本高的jquery不能使用Camera;

　　　　2、引入css的样式：

<link rel="stylesheet" href="camera.css" type="text/css" media="all">

　　　　下面说几个常用的参数：

　　　　　　data-src: 图片路径；

　　　　　　data-src: 图片路径；

　　　　　　data-thumb: 缩略图路径；

　　　　　　data-link: 图片的链接（写入路径）

　　　　　　data-time: 图片的显示时间( "可直接输入数字" )

　　　　　　data-video: 取消视频自动播放( "hide" )

　　　　以上是图片的参数, 切记每条属性只针对的是一张图片。

　　　　下面是JS上的参数, 也就是控制整个幻灯片的

　　　　　　height: '' 幻灯片的高度

　　　　　　hover: 鼠标经过幻灯片时暂停(true, false)

　　　　　　imagePath: 图片的目录

　　　　　　loader: 加载图标(pie, bar, none)

　　　　　　loaderColor: 加载图标颜色( '颜色值,例如:#eee' )

　　　　　　loaderBgColor: 加载图标背景颜色

　　　　　　loaderOpacity: 加载图标的透明度( '.8'默认值, 其他的可以写 0, .1, .2, .3, .4, .5, .6, .7, .8, .9, 1 )

　　　　　　loaderPadding: 加载图标的大小( 填数字,默认为2 )

　　　　　　navigation: 左右箭头显示/隐藏(true, false)

　　　　　　navigationHover: 鼠标经过时左右箭头显示/隐藏(true, false)

　　　　　　playPause: 暂停按钮显示/隐藏(true, false)

　　　　　　pauseOnClick: 鼠标点击后是否暂停(true, false)

　　　　　　time: 幻灯片播放时间( 填数字 )

　　　　通过以上的参数来设置，最后将会实现Camera 的效果；

　　　　因为以上的参数仅仅是一些简单的常用参数，要是想写更好的效果那就去官网查看更加详细的资料了；

　　下面是一个Camer的简单效果：（注意代码中的图片路径及jquery的引用）:

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>Camera.js</title>

    <link rel="stylesheet" href="css/camera.css"/>

    <script src="js/jquery.min.js"></script>

    <script src="js/jquery.easing.1.3.js"></script>

    <script src="js/camera.min.js"></script>

    <style>

    body{

        min-width:1366px;

    }

	p:before{

	background-color: #ccc;

        border: 1px solid;

}

    </style>

</head>

<body>

<script>

    jQuery(function(){

        jQuery('#camera_wrap_1').camera({

            height: '500px',//图片的高度

            loader: 'bar'

        });

    });

</script>

<div class="a">

    <div id="camera_wrap_1">

        <div data-src="./images/img-slider1.jpg" data-link="a.html">

        </div>

        <div data-src="./images/img-slider2.jpg"  >

        </div>

        <div  data-src="./images/img-slider1.jpg"  >

        </div>

    </div>

</div>

</body>

</html>

　　代码中的图片路径可以任意链接；

　　

　　要是想在图片的下方添加文字的话可以使用以下代码：

　　

<div data-src="1.jpg" data-thumb="small1.jpg" >

    <div class="camera_caption fadeFromBottom">

        这里是文字描述信息

    </div>

</div>

　　

　　

Camera 幻灯片播放的更多相关文章

  1. 一款炫酷的幻灯片播放框架介绍（附demo及使用方法）

    废话不多说,先上demo(建议在chrome下打开 F键全屏 esc退出全屏): 我的demo-博客园简介 官网demo 更多demo 今天为大家介绍一款基于css3和JavaScript的幻灯片播放 ...

  2. js实现幻灯片播放图片示例代码

    幻灯片播放图片的效果想必大家都有见到过吧,下面有个不错的示例,感兴趣的朋友可以参考下 复制代码代码如下: <select id="img_date" style=" ...

  3. 实现ppt幻灯片播放倒计时

    需求:为控制会议时间,采取ppt幻灯片播放倒计时的办法,倒计时5分钟. 分析:用EnumWindows枚举窗口,发现PPT窗口类名有三种:PP12FrameClass.MS-SDIb.screenCl ...

  4. 非常优秀的swiper插件————幻灯片播放、图片轮播

    http://www.idangero.us/ http://www.swiper.com.cn/ Swiper中文网 2015-10-15 SuperSlide2: (这是个PC用的滚屏插件,看着不 ...

  5. css实现幻灯片播放效果

    用css实现幻灯片播放是最基础的,闲下来没事就试着写了一下,如果有不够完善或者方法不好的地方还请指点.下面我就用两种方法实现css花灯片效果. 方法1:定位.通过position属性改变left值 h ...

  6. 网页FLASH幻灯片播放带链接源代码 pixviewer.swf使用(转)

        <script type="text/javascript"> <!-- var focus_width=360 var focus_height=270 ...

  7. Android App中使用Gallery制作幻灯片播放效果

    http://www.jb51.net/article/83313.htm 我们有时候在iPhone手机上或者Windows上面看到动态的图片,可以通过鼠标或者手指触摸来移动它,产生动态的图片滚动效果 ...

  8. ECMAScript对文件夹图片幻灯片播放

    代码如下: var curContext = null; var curWeb = null; var picListTitle = "PictureLib"; var folde ...

  9. 基于fullpage的幻灯片播放

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8&quo ...

随机推荐

  1. canvas 动态飞速旋转的矩形

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  2. .NET开发中的事务处理大比拼

    本文转载:http://www.cnblogs.com/jhxk/articles/2696307.html http://liubaolongg.blog.163.com/blog/static/2 ...

  3. AVR 定点数运算程序设计及数制转换

    AVR 单片机有加法和减法指令,可以直接调用相关指令来达到目的. 这里列出了16位加法.16位带立即数加法. 16位减法.16位带立即数减法. 16位比较.16位带立即数比较程序和16位取补程序. a ...

  4. SCOM资源池

    为了分散RMS特定的工作负载,默认创建有三个资源池. 1. All Management Servers Resource Pool: 将大多数RMS具体实例和工作流放入到这个池中.默认情况下,如果一 ...

  5. C++经典面试题

    1.int a=5,则 ++(a++)的值是() A.5      B.   6          C.7       D.逻辑错误 a++返回的是一个暂时变量,这里是右值,不能再前面++了 2.以下 ...

  6. 记录一些在VPS上折腾的东西

    折腾这些东西,总是要经常借助搜索引擎找答案,找的次数多了,也就烦了,不想总是做重复工作. 所以把做过的一些事情记录一下,加深一下印象. 1.安装python2.7 VPS上面的太老了,之前安装的,过程 ...

  7. 安装mysql问题

    我想大多数人都遇到第一次安装失败或者卸载安装mysql,老是在最后一步失败:解决方法有2个:1 删除 默认路径文件C:\Documents and Settings\All Users\Applica ...

  8. Objective-C的对象模型和runtime机制

    内容列表 对象模型(结构定义,类对象.元类和实例对象的关系) 消息传递和转发机制 runtime系统功能理解 对象模型 结构定义 对象(Object): OC中基本构造单元 (building blo ...

  9. Google Map和桌面组件 Android开发教程

    本文节选于机械工业出版社推出的<Android应用开发揭秘>一 书,作者为杨丰盛.本书内容全面,详细讲解了Android框架.Android组件.用户界面开发.游戏开发.数据存储.多媒体开 ...

  10. linux下的十六进制编辑器---wxHexEdit

    ....其实wxHexEdit是一个跨平台的十六进制编辑器,支持windows,linux,mac. 之所以标题用linux...是因为windows下多数都用winhex,UE之类的编辑器,而lin ...