Camera.js——百叶窗幻灯片(超炫)

.效果一

今天偶然发现一个jquery轮播广告插件很不错，效果很炫，堪比Flash轮播广告效果，赶紧上来分享给大家。

这个幻灯片每次切换都是随机调用他设置的特效，所以各种混合切换的效果还是不错的。我们先来看下怎么调用吧：

html代码：

     
     
<div class="camera_wrap" id="camera_wrap_1">
    <div data-src="img/1.jpg"></div>
    <div data-src="img/2.jpg"></div>
    <div data-src="img/3.jpg"></div>                                        
</div>

页面头部引入插件：

     
     
<link rel="stylesheet" id="camera-css"  href="css/camera.css" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/camera1.3.4.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

需要注意的是: Camera貌似不支持jQuery v1.9, 官方给出的版本是jQuery v1.7.1。

jquery调用方法

     
     
$(function(){    
    $('#camera_wrap_1').camera();    
});

这个插件看起来挺复杂的，实际调用还是非常简单的，不过这个特效就是稍微大了点，如果要做特效网站的同学可以考虑尝试一下。

. 效果二（带缩略图、文字）

另外如上，比如想定义幻灯片的高度和图片的目录:

<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的各种参数, 仅仅写几个常用的, 剩下的可以去官网看

首先是图片上的参数:

• 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" )

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

下面是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: 动画速度( 填数字 )

官网：http://www.pixedelic.com/plugins/camera/

github地址：https://github.com/owen-hong/camera-slider 

下载地址：https://github.com/owen-hong/camera-slider/archive/master.zip