【示例源代碼下載】：http://download.csdn.net/detail/yousuosi/6501701
Nivo Slider號稱世界最棒的輕量級JQuery圖片幻燈插件，按它的官網所說，“以漂亮和易於使用而聞名於世”！
憾人的效果可欣賞一下由Solagirl收集整理的實例展示：http://www.solagirl.net/mydemo/my-custom-nivo-slider/
我們先從最簡單的開始。
一、效果圖
二、設置要顯示的圖片和圖片標題
HTML結構和內容示例如下：
- <div class="slider-wrapper">
- <div id="slider" class="nivoSlider">
- <img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" />
- <a href="http://dev7studios.com"><img src="images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" /></a>
- <img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" />
- <img src="images/nemo.jpg" data-thumb="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>
說明：
-
這個HTML結構和內容只是起設置作用，一般在呈現的時候都不顯示；
-
簡單的圖片標題可以象第二張圖片那樣，在屬性中設置；複雜的標題可以象第四張圖片那樣，設置標題的id；當然也可以象第一、三張圖片那樣不設置標題。
-
給圖片加鏈接，應該可以不用說了。
三、配置NivoSlider插件
配置NivoSlider插件非常簡單，你只需要在網頁的<head>標籤中添加如下代碼：
- <link href="JQuery/nivo-slider.css" rel="stylesheet" type="text/css" />
- <script src="JQuery/jquery-1.10.1.min.js" type="text/javascript"></script>
- <script src="JQuery/jquery.nivo.slider.pack.js" type="text/javascript"></script>
- <script type="text/javascript">
- $(window).load(function() {
- $('#slider').nivoSlider();
- });
- </script>
說明：
-
Nivo Slider官網地址：http://dev7studios.com/plugins/nivo-slider，可下載最新版本的Nivo Slider；
-
JQuery需要v1.7+以上版本，本實例使用的是jQuery v1.10.1。
參考網址：
[1]Nivo Slider 簡要使用文檔.http://www.2cto.com/kf/201202/119195.html.
[2]基於JQuery Nivo Slider幻燈插件.http://www.111cn.net/wy/jquery/40801.htm.
[3]Nivo Slider官網教程：http://docs.dev7studios.com/jquery-plugins/nivo-slider
