图片切换jQuery的Nivo Slider使用方法

Nivo Slider運用其功能如下：

• 9 獨特效果
• 簡單的清除及有效標記
• 載入設置及調整
• 內建方向和控制導航
• 打包的版本只有 7 kb
• 支援連結影像
• 鍵盤導航
• HTML 標題

其可免費使用，並根據 MIT 許可證濫用請參閱此頁的 Belorussian 翻譯。已對 Nivo Slider進行了測試，在以下瀏覽器顯示都沒有問題：

• Internet Explorer v7+
• Firefox v3+
• Google Chrome v4
• Safari v4
• Opera v10.5

必須示範看得到什麼可以通過 Nivo 滑塊或簽出的使用 Nivo Slider網站顯示的想法。
若要使用 Nivo Slider必須包括 jQuery、Nivo Slider script和 Nivo Slider CSS網頁上：

1. <link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" /><?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />
2. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
3. <script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>

複製代碼

接下來需要增一些HTML。這是一般只是div包含影像。請注意，只有影像或包裝在連結的影像，允許在Slider專區任何其它HTML將打破Slider。
將標題增加到一個影像，您只需將標題屬性添加到影像中。若要添加一個HTML標題只是將標題屬性設置為包含您的標題(以雜湊值作為首碼）的元素的ID。請注意包含標題的HTML元素必須有CSS類nivo html的標題應用，並且必須是以外的Slider專區
作為的v1.2還支援連結的影像：

1. <div >
2.         <img src="images/slide1.jpg" alt="" />
3.         <a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" title="#htmlcaption" /></a>
4.         <img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
5.         <img src="images/slide4.jpg" alt="" />
6. </div>
7. <div >
8.     <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
9. </div>

複製代碼

最後需要使用$(window).load()功能：

1. <script type="text/javascript">
2. $(window).load(function() {
3.         $('#slider').nivoSlider();
4. });
5. </script>

複製代碼

Nivo Slider有很多選項來做fiddle。 下面程式碼的所有的可用選項及預設範例：

1. <script type="text/javascript">
2. $(window).load(function() {
3.         $('#slider').nivoSlider({
4.                 effect:'random', //Specify sets like: 'fold,fade,sliceDown'
5.                 slices:15,
6.                 animSpeed:500, //Slide transition speed
7.                 pauseTime:3000,
8.                 startSlide:0, //Set starting Slide (0 index)
9.                 directionNav:true, //Next & Prev
10.                 directionNavHide:true, //Only show on hover
11.                 controlNav:true, //1,2,3...
12.                 controlNavThumbs:false, //Use thumbnails for Control Nav
13.       controlNavThumbsFromRel:false, //Use image rel for thumbs
14.                 controlNavThumbsSearch: '.jpg', //Replace this with...
15.                 controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
16.                 keyboardNav:true, //Use left & right arrows
17.                 pauseOnHover:true, //Stop animation while hovering
18.                 manualAdvance:false, //Force manual transitions
19.                 captionOpacity:0.8, //Universal caption opacity
20.                 beforeChange: function(){},
21.                 afterChange: function(){},
22.                 slideshowEnd: function(){} //Triggers after all slides have been shown
23.         });
24. });
25. </script>

複製代碼

在參數會影響下列任一個：

• sliceDown
• sliceDownLeft
• sliceUp
• sliceUpLeft
• sliceUpDown
• sliceUpDownLeft
• fold
• fade
• random

這些規則是可選的但建議要使用時，則看起來完全Nivo Slider。

1. #slider {
2.         ;
3.         //See the "style-pack" below for image
4.         background:url(images/loading.gif) no-repeat 50% 50%;
5. }
6. #slider img {
7.         ;
8.         top:0px;
9.         left:0px;
10.         display:none;
11. }

複製代碼

對您要使用的事實，$(window).load()有函數是外掛程式應用前的延遲的某些元素的樣式。 可透過手動應用CSS 樣式，以停止閃爍前頁上的影像 外掛程式載入。
要停止看有點怪的Slider，請確保您的影像都相同的大小。
手動啟動和停止Slider，可以使用下面的程式碼：

1. $('#slider').data('nivo:vars').stop = true; //Stop the Slider
2. $('#slider').data('nivo:vars').stop = false; //Start the Slider

複製代碼

Nivo Slider在同一頁上支援多個Slider，但您必須使用 jQuery v1.4.0 或更高的工作。
如果您正在使用連結您的影像的所有他們可能會做在 IE 和奇怪的事情。 要解決這只需添加下面的 CSS 規則：

1. #slider a{
2.         display:block;
3. }

複製代碼

使用隨機的起始幻燈片，可使用在startSlide設置進行如下操作：

1. var total = $('#slider img').length;
2. var rand = Math.floor(Math.random()*total);
3. $('#slider').nivoSlider({
4.      startSlide:rand
5. });

複製代碼

下載：Nivo Slider - The Most Awesome jQuery Image Slider