jquery.Nivoslider.js豐富圖片插件參數詳解

Nivoslider是一款基於jQuery的，能實現多種切換效果的圖片切換插件。Nivoslider提供了11種切換效果，支持多種參數配置和方法函數調用，使用簡單，是一款非常理想的圖片切換插件。

注：Nivoslider運用功能如下：

   9獨特效果；

   簡單的清除及有效標記；

   載入設置及調整；

   內建方向和控制導航；

   打包的版本只有7KB；

   支援連接影像；

   鍵盤導航；

   HTML標題；

HTML結構：

<div id="slider" class="nivoSlider">
        <a href="javascript:void(0);"><img src="images/s1.jpg" alt="" title="好漂亮的狗狗..."  /></a>
        <a href="javascript:void(0);"><img src="images/s2.jpg" alt="" title="圖片標題..." /></a>
        <a href="javascript:void(0);"><img src="images/s3.jpg" alt="" title="#htmlcaption" /></a>
</div>
<div id="htmlcaption" class="nivo-html-caption">
        <strong>圖片標題</strong>，支持HTML標簽 <a href="http://www.helloweba.com">helloweba.com</a>.
</div> 

在ID為slider的DIV中，放置了三張需要切換的圖片。如果你想給讓單擊圖片時打開一個頁面地址，就給圖片加個<a>標簽鏈接，如果你想給圖片加個標題說明，可以使用title屬性，如果你想讓標題有樣式或者鏈接，可以將圖片的title屬性設置為像"#htmlcaption"，即#號后面緊跟指向的ID，如上所示代碼，在ID為htmlcaption的DIV中，你可以編輯你想要的HTML代碼，Nivoslider插件支持html的圖片標題。

CSS樣式（首先需要載入插件所需的CSS文件。）

<link rel="stylesheet" type="text/css" href="nivo-slider.css" />

然后設置展示插件所需的樣式，像控制導航鍵，導航按鈕樣式，當然你可以自己寫個樣式，代碼參照如下：

#slider{width:680px; height:272px; margin:40px auto;background:url(images/loading.gif) no-repeat 50% 50%;}
#slider img {position:absolute;top:0px;left:0px;display:none;}
.nivo-controlNav{position:absolute; right:5px;bottom:0px;}
.nivo-controlNav a {display:block;width:22px;height:22px;background:url(images/bullets.png) no-repeat;text-indent:-9999px;border:0;margin-right:3px;float:left;}
.nivo-controlNav a.active {background-position:0 -22px;}
.nivo-directionNav a {display:block;width:30px;height:30px;background:url(images/arrows.png) no-repeat;text-indent:-9999px;border:0;}
a.nivo-nextNav {background-position:-30px 0;right:15px;}
a.nivo-prevNav {left:15px;}
.nivo-caption {text-shadow:none; font-family: Helvetica, Arial, sans-serif;}
.nivo-caption a {color:#efe9d1;text-decoration:underline;}

jQuery(先載入jQuery庫和插件。)

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>

然后調用Nivoslider插件。

<script type="text/javascript">
$(function() {
     $('#slider').nivoSlider();
});
</script>

這樣，一個非常漂亮的圖片切換效果就完成了。如果你需要特別的要求可以修改插件的配置參數和方法函數。

Nivoslider插件參數和方法一覽表

 

參數/方法	描述	默認值
基本
effect	圖片切換效果。提供了11種效果：'sliceDownRight','sliceDownLeft','sliceUpRight','sliceUpLeft', 'sliceUpDown','sliceUpDownLeft', 'fold','fade','slideInRight','slideInLeft'，諸如漸入漸出，滑動，百葉窗等等都有。	random
animSpeed	圖片切換速度（毫秒）	500
pauseTime	圖片停留時間（毫秒）	3000
startSlide	開始切換的位置（即從第幾張圖開始切換）。	0
directionNav	是否使用左右按鈕導航	true
directionNavHide	是否當鼠標滑上圖片時出現左右導航按鈕	true
controlNav	是否使用導航控制條，即顯示每張圖片的按鈕	true
controlNavThumbs	是否使用縮略圖控制導航	false
controlNavThumbsFromRel	是否使用圖片的rel屬性關聯縮略圖	false
controlNavThumbsSearch	縮略圖類型	'.jpg'
controlNavThumbsReplace	縮略圖后綴	'_thumb.jpg'
keyboardNav	是否支持鍵盤方向鍵切換（貌視IE不支持）	true
pauseOnHover	當鼠標滑向圖片時，停止切換	true
manualAdvance	是否不自動切換，當為true時，需要手動切換	false
captionOpacity	設置圖片標題說明的背景透明度	0.8
方法
beforeChange	當發生切換前，回調函數
afterChange	當發生切換后，回調函數
slideshowEnd	完成所有的切換動作后，回調函數
lastSlide	切換最后一張圖片時，回調函數
afterLoad	當加載完成時，回調函數

文件分享下載如下：baiduyunguanjia-javascript實例-20141020-jquery.Nivoslider.js插件豐富圖片輪播效果