推薦:圖片輪播插件Nivo Slider

      因為項目需要一款切換樣式多一些的輪播插件，不經意找到了NivoSlider，非常好用，比bootstrap要好用，而且樣式豐富。值得注意的是，這款插件是在MIT協議下免費的。

      

      Demo地址： http://demo.dev7studios.com/nivo-slider/    

一、起步

    1.最簡單寫法。 這樣會生成隨機輪播的效果圖。而且大小圖切換平緩。

    <link href="Content/themes/default/default.css" rel="stylesheet" />
    <link href="Content/themes/nivo-slider.css" rel="stylesheet" />
     <div id="wrapper" >
            <div class="slider-wrapper theme-default">
                <div id="slider" class="nivoSlider">
                   <%-- <img src="Content/images/11.jpg"  alt="" />
                    <img src="Content/images/12.jpg"   alt=""   /> 
                    <img src="Content/images/13.jpg"  alt=""  />
                    <img src="Content/images/14.jpg" alt=""  />--%>
                </div>   </div>
        </div>
           <script type="text/javascript">
            $(window).load(function () {
                $('#slider').nivoSlider();
            });
            </script>
          <script src="Scripts/jquery.nivo.slider.js"></script>

二、特點

 支持多種樣式，可以直接定義到每一張圖。

 

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

1.data-transition 定義了切換到這張圖片的動畫效果。
2.title 就是圖片下方會出現的黑色備注條，而且可以插入鏈接，如上文中最后一張圖對於的title --> #htmlcaption
3.data-thumb 表示是的縮略圖地址。
4.控制點，上一頁，下一頁是自動生成。
5.支持自動播放


相對於bootstrap的Carousel的寫法 省事不少。后台組織html的時候，只需要添加或者刪除圖片就行了。

<div id="myCarousel" class="carousel slide">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">…</div>
    <div class="item">…</div>
    <div class="item">…</div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

 

三、樣式修改

  本身的demo中有幾種樣式

 

 但是想調整一下控制點的位置（默認的是在最下面占一行，這個比較占地方）以default為例是在default.css中修改 .nivo-controlNav 類

.theme-default .nivo-controlNav {
    text-align: center;
    padding:0;
     width: 160px;
    position: absolute;
    right: 0;bottom: 2px;
    z-index: 1112;
}

定位在右下角。

開始的時候上一頁的圖標圖片位置不對，露出了兩個箭頭。調整了下。.nivo-prevNav

.theme-default a.nivo-prevNav {
    background-position:6px 0;
    left:15px;
}

 分享給大家，希望大家喜歡~