图片切换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

posted on 2011-06-22 17:13  AlvinXiao  阅读(21435)  评论(2编辑  收藏  举报