推荐:图片轮播插件Nivo Slider

时间:2022-03-19 17:12:29
      因为项目需要一款切换样式多一些的轮播插件,不经意找到了NivoSlider,非常好用,比bootstrap要好用,而且样式丰富。值得注意的是,这款插件是在MIT协议下免费的。
      推荐:图片轮播插件Nivo Slider
      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.支持自动播放
推荐:图片轮播插件Nivo Slider 相对于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:;
width: 160px;
position: absolute;
right:;bottom: 2px;
z-index:;
}

定位在右下角。

开始的时候上一页的图标图片位置不对,露出了两个箭头。调整了下。.nivo-prevNav

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

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