Camera幻灯片体验(配合JQuery mobile)

在JQuery插件库发现一款幻灯片插件：Camera，可以适配手机端

官方网址 http://www.pixedelic.com/plugins/camera/  最新的版本是v.1.3.4, 最后更新时间2012.06.23

 

显示效果如下：右上角是滚动播放的时间进度条，动画效果是随机的

 

在官网下载之后，在html引入文件

<link rel='stylesheet' id='camera-css'  href='css/camera.css' type='text/css' media='all'>
<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版本是1.10，不支持，所以在

 

<!-- 引入 jQuery 库 -->
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>

下面又引入了一个Camera官方demo的jquery，版本是1.7

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

下面开始使用Camera

<script>
        jQuery(function(){
            jQuery('#camera_wrap_1').camera({
                thumbnails: true
            });
        });
</script>

<div class="camera_wrap camera_azure_skin" id="camera_wrap_1">
            <div data-thumb="../images/slides/thumbs/bridge.jpg" data-src="../images/slides/bridge.jpg">
                <div class="camera_caption fadeFromBottom">
                    Camera is a responsive/adaptive slideshow. <em>Try to resize the browser window</em>
                </div>
            </div>
            <div data-thumb="../images/slides/thumbs/leaf.jpg" data-src="../images/slides/leaf.jpg">
                <div class="camera_caption fadeFromBottom">
                    It uses a light version of jQuery mobile, <em>navigate the slides by swiping with your fingers</em>
                </div>
            </div>
            <div data-thumb="../images/slides/thumbs/road.jpg" data-src="../images/slides/road.jpg">
                <div class="camera_caption fadeFromBottom">
                    <em>It's completely free</em> (even if a donation is appreciated)
                </div>
            </div>
            <div data-thumb="../images/slides/thumbs/sea.jpg" data-src="../images/slides/sea.jpg">
                <div class="camera_caption fadeFromBottom">
                    Camera slideshow provides many options <em>to customize your project</em> as more as possible
                </div>
            </div>
</div><!-- #camera_wrap_1 -->

 

 在data-src里 配置好图片路径就会出现图片轮播的效果，data-thumb是小图标的路径，把鼠标放在图片下面的小点点上面就会出现小图标。

 

 

下面是关于camera的各种参数，只有一部分，转自 http://www.jq22.com/jquery-info1792

首先是图片上的参数:

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