今天偶然發現一個jquery輪播廣告外掛很不錯，效果很炫，堪比Flash輪播廣告效果，趕緊上來分享給大家。

這個幻燈片每次切換都是隨機呼叫他設定的特效，所以各種混合切換的效果還是不錯的。我們先來看下怎麼呼叫吧：

html程式碼：

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

頁面頭部引入外掛：

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

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

jquery呼叫方法

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

這個外掛看起來挺複雜的，實際呼叫還是非常簡單的，不過這個特效就是稍微大了點，如果要做特效網站的同學可以考慮嘗試一下。

. 效果二（帶縮圖、文字）

另外如上，比如想定義幻燈片的高度和圖片的目錄:

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