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

二、特点

支持多种样式，可以直接定义到每一张图。

图片轮播插件Nivo Slider

  <div id="slider" class="nivoSlider">

  <img src="data:images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" />

  <a href="http://dev7studios.com"><img src="data:images/up.jpg"  alt="" title="This is an example of a caption" /></a>

  <img src="data:images/walle.jpg" alt="" data-transition="slideInLeft" />

  <img src="data: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中有几种样式

图片轮播插件Nivo Slider

但是想调整一下控制点的位置（默认的是在最下面占一行，这个比较占地方）以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

秒客网

图片轮播插件Nivo Slider

推荐:图片轮播插件Nivo Slider

相关文章