Nivo Slider - 世界上最棒的 jQuery 圖片輪播外掛

　Nivo Slider號稱世界最棒的輕量級JQuery圖片幻燈外掛，按它的官網所說，“以漂亮和易於使用而聞名於世”！有獨立的 jQuery 外掛和 WordPress 外掛兩個版本。jQuery 獨立版本的外掛主要有如下特色：

• ✓  16個獨特的過渡效果
• ✓  簡潔和有效的標記
• ✓  載入引數設定
• ✓  內建方向和導航控制
• ✓  壓縮版本大小隻有12KB
• ✓  支援連結影像
• ✓  支援 HTML 標題
• ✓  3套精美光滑的主題
• ✓  在MIT許可下免費使用
• ✓  支援響應式設計

　　官網地址：http://dev7studios.com/plugins/nivo-slider

　　外掛下載：http://dev7studios.com/downloads/63

　　效果演示：http://demo.dev7studios.com/nivo-slider

　　示例程式碼：

　　Javascript程式碼

　　類庫引用：

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

　　呼叫程式碼：

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

　　你可以自定義如下選項：

• 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>

　　HTML程式碼

<div class="slider-wrapper theme-default">
    <div class="ribbon"></div>
    <div id="slider" class="nivoSlider">
        <img src="images/toystory.jpg" alt=""/>
        <a href="http://dev7studios.com"><img src="images/up.jpg" alt="" title="This is an example of a caption"/></a>
        <img src="images/walle.jpg" alt="" data-transition="slideInLeft"/>
        <img src="images/nemo.jpg" alt="" title="#htmlcaption"/>
    </div>
    <div id="htmlcaption" class="nivo-html-caption">
        <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
    </div>
</div>

　　如何為每一個幻燈自定義變化效果：

<img src="images/slide1.jpg" alt="" data-transition="slideInLeft"/>

　　希望大家喜歡！