然後設置展示插件所需的樣式，像控制(zhì)導航鍵，導航按鈕樣式，當然你(nǐ)可(kě)以自己寫個(gè)樣式，代碼參照如下：

#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;left:300px;bottom:-42px;}
.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庫和(hé)插件。

然後調用Nivoslider插件。

$(function() {
	 $('#slider').nivoSlider();
});

這樣，一個(gè)非常漂亮的圖片切換效果就完成了。如果你(nǐ)需要特别的要求可(kě)以修改插件的配置參數(shù)和(hé)方法函數(shù)。

Nivoslider插件參數(shù)和(hé)方法一覽表