图片轮播插件Nivo Slider

推荐:图片轮播插件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;
}

分享给大家，希望大家喜欢~

分类: Jquery

标签: jquery, NivoSlider