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: 動畫速度( 填數字 )