現在市面上基於jQuery的輪播圖插件種類繁多，各具特色，這對於具有選擇困難症的童鞋來說就痛苦了，不知道選哪個，那麼，今天小編就來幫你選擇一款，號稱最好的jquery幻燈片插件，Nivo-Slider,這款插件無論是在交互效果，還是輪播效果，還是使用方法及功能都堪稱完美。其效果可與Flash的幻燈片媲美，例如： 這個flash的幻燈顯示
主要特性：
- 號稱世界最棒的jQuery幻燈插件
- 16種幻燈變化的特效
- 簡單並且配置靈活
- 體積小並且符合語義
- jQuery插件使用免費（但是wordpress插件需要付費：20美元）
使用方法：
1.引入以下js文件和CSS文件
-
<link rel="stylesheet" href="css/nivo-slider.css" media="screen">
-
<script type="text/javascript" src="asserts/jquery/jquery-1.4.3.min.js"></script>
-
<script src="asserts/jquery.nivo.slider.pack.js"></script>
標註：我測試了以下，該插件目前只支持1.4.3版本的JQuery庫，用其他的庫的話可能會出現異常（親測有效）
2.在head標籤中加入以下js代碼
-
<script>
-
$(window).load(function () {
-
$('#slider').nivoSlider({
-
effect:'sliceUp', //此參數可自選
-
controlNavThumbs:true //此參數可自選
-
})
-
})
-
</script>
標註：該插件提供的方法中提供了諸多參數，供用戶自由選擇使用，視具體情況
3.在body中加入以下格式的html代碼
-
<div class="slider-wrapper">
-
<ul class="nivoSlider" id="slider">
-
<li><img src="images/nemo.jpg" alt="img1" title="I am a Bird" data-transition="sliceUp" ></li>
-
<li><img src="images/up.jpg" alt="img2"></li>
-
<li><img src="images/toystory.jpg" alt="img3"></li>
-
<li><img src="images/walle.jpg" alt="img4"></li>
-
</ul>
-
</div>
至此，就完成了一個簡約的輪播圖了，如還要加工成你想要的效果，就自己在CSS裏修飾了。
此外，你還可以自定義一些選項參數：
- effect: 設置幻燈變化效果，可以使用'random', 或者指定效果如, 'fold,fade,sliceDown'
- slices: slice動畫效果參數
- boxCols: box動畫效果參數
- boxRows:box動畫效果參數
- animSpeed: 動畫變化速度
- pauseTime: 每個幻燈時間
- startSlide: 起始幻燈
- directionNav: 是否顯示“上一個”和“下一個”導航
- directionNavHide: 是否懸浮顯示導航
- controlNav: 是否顯示導航控制
- controlNavThumbs: 導航是否使用縮略圖
- controlNavThumbsFromRel: 是否讓圖片使用rel
- controlNavThumbsSearch: 導航縮略圖後綴
- controlNavThumbsReplace: 導航縮略圖替換
- keyboardNav: 是否鍵盤導航
- pauseOnHover: 懸浮是否停止
- manualAdvance: 是否手動變化幻燈
- captionOpacity: 標題透明度
- prevText: 上一張文字設定
- nextText: 下一張文字設定
- randomStart: 是否隨機開始
- beforeChange: 函數，在幻燈變化前調用
- afterChange:函數，在幻燈變化後調用
- slideshowEnd:函數，在幻燈變化完成調用
- lastSlide:函數，在最後一個幻燈變化完成調用
- afterLoad: 函數，slider加載後調用
代碼示例：
-
<script type="text/javascript">
-
$(window).load(function() {
-
$('#slider').nivoSlider({
-
effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
-
slices: 15, // For slice animations
-
boxCols: 8, // For box animations
-
boxRows: 4, // For box animations
-
animSpeed: 500, // Slide transition speed
-
pauseTime: 3000, // How long each slide will show
-
startSlide: 0, // Set starting Slide (0 index)
-
directionNav: true, // Next & Prev navigation
-
directionNavHide: true, // Only show on hover
-
controlNav: true, // 1,2,3... navigation
-
controlNavThumbs: false, // Use thumbnails for Control Nav
-
controlNavThumbsFromRel: false, // Use image rel for thumbs
-
controlNavThumbsSearch: '.jpg', // Replace this with...
-
controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
-
keyboardNav: true, // Use left & right arrows
-
pauseOnHover: true, // Stop animation while hovering
-
manualAdvance: false, // Force manual transitions
-
captionOpacity: 0.8, // Universal caption opacity
-
prevText: 'Prev', // Prev directionNav text
-
nextText: 'Next', // Next directionNav text
-
randomStart: false, // Start on a random slide
-
beforeChange: function(){}, // Triggers before a slide transition
-
afterChange: function(){}, // Triggers after a slide transition
-
slideshowEnd: function(){}, // Triggers after all slides have been shown
-
lastSlide: function(){}, // Triggers when last slide is shown
-
afterLoad: function(){} // Triggers when slider has loaded
-
});
-
});
-
</script>
effect屬性有十六種效果，默認爲random（隨機切換效果）：
- random
- sliceDown
- sliceDownLeft
- sliceUp
- sliceUpLeft
- sliceUpDown
- sliceUpDownLeft
- fold
- fade
- slideInRight
- slideInLeft
- boxRandom
- boxRain
- boxRainReverse
- boxRainGrow
- boxRainGrowReverse
如果你想爲每一張圖片自定義輪播效果：
-
<img src="images/slide1.jpg" alt="" data-transition="slideInLeft"/>
他的使用方法就全部介紹完了，完美！
