Camera.js幻灯片插件

    Camera是个很不错的幻灯片, 支持的切换效果非常多，占空间的容量也很小, 支持缩略图、上一页下一页翻页，播放暂停按钮、播放进度条等功能，许多国外的网站都在使用了camera.js，例如美食订餐类网站手机html5模板。Camera幻灯片还是有官方网站的, 并且现在居然也能打开。网址: http://www.pixedelic.com/plugins/camera/。最新的版本是v.1.3.4, 最后更新时间2012.06.23。
    需要注意的是: Camera貌似不支持jQuery v1.9, 官方给出的版本是jQuery v1.7.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>

然后是CSS:

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

html代码:

<div class="camera_wrap" id="camera_demo">
  <div data-src="1.jpg"></div>
  <div data-src="1.jpg"></div>
</div>

调用幻灯片插件

<script>
  $('#camera_demo').camera({});
</script>

幻灯片参数使用示例:

<script>
$('#camera_demo').camera({
  height: '150px',
  imagePath: 'images/'
});
</script>

如果想加缩略图的话, 图片上应该这么写:

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

如果想加文字的话, 可以写在图片的里面, 例:

<div data-src="1.jpg" data-thumb="small1.jpg" >
    <div class="camera_caption fadeFromBottom">
        这里是文字描述信息
    </div>
</div>

以下是关于camera的常用参数，具体可去官网查看：

    html属性参数(每个slider容器属性):

data-src: 图片路径
data-thumb: 缩略图路径
data-link: 图片链接
data-portrait: 显示图片的实际尺寸( "true", "false" )
data-slideOn: 渐隐效果( "next", "prev", "random" )
data-target: 链接打开的形式( "_blank", "_new", "_parent", "_self", "_top" )
data-time: 图片的显示时间( "可直接输入数字" )
data-video: 取消视频自动播放( "hide" )

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

    下面是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)
pagination: 是否显示分页(true, false)
playPause: 暂停按钮显示/隐藏(true, false)
pauseOnClick: 鼠标点击后是否暂停(true, false)
portrait: 显示幻灯片里所有图片的实际大小(true, false)
thumbnails: 是否显示缩略图(true, false)
time: 幻灯片播放时间( 填数字 )
transPeriod: 动画速度( 填数字 )