Camera 幻灯片播放

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-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-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>