插件描述：JQUERY幻灯片-NIVO SLIDER,jquery图片切换
使用步骤
1、引入以下的js和css文件
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen"> <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script> <script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
2、在head标签中加入以下js代码
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>3、在body标签中加入以下格式的html代码
<div class="slider-wrapper"> <div id="slider" class="nivoSlider"> <img src="images/slide1.jpg" alt=""> <a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" title="#htmlcaption"></a> <imgsrc="images/slide3.jpg" alt="" title="This is an example of a caption"> <imgsrc="images/slide4.jpg" alt=""> </div> </div> <div id="htmlcaption" class="nivo-html-caption"> <strong>This</strong> is an example of a <em>HTML</em> caption with <ahref="#">a link</a>. </div>
参数配置
| 参数名 | 参数说明 | 参数类型 | 默认值 |
| effect | 切换样式 | 字符串 | ‘random’ |
| slices | 针对slice样式的切换级数，数字越大切换越慢过渡越小 | 数字 | 15 |
| boxCols | 针对box样式的切换列数，数字越大切换越慢过渡越小 | 数字 | 8 |
| boxRows | 针对box样式的切换行数，数字越大切换越慢过渡越小 | 数字 | 4 |
| animSpeed | 切换动画的速度 | 数字 | 500 |
| pauseTime | 相邻两张幻灯片切换的间隔时间 | 数字 | 3000 |
| startSlide | 从第几张图片开始切换 | 数字 | 0 |
| directionNav | 是否显示‘上一张/下一张’导航 | 布尔值 | true |
| controlNav | 是否显示数字导航 | 布尔值 | true |
| controlNavThumbs | 是否用缩略图导航 | 布尔值 | false |
| pauseOnHover | 当鼠标移到幻灯片上的时候是否暂停切换 | 布尔值 | true |
| manualAdvance | 是否强制手动切换 | 布尔值 | false |
| prevText | ’上一张‘的文字 | 字符串 | ‘Prev’ |
| nextText | ’下一张‘的文字 | 字符串 | ‘Next’ |
| randomStart | 是否从一张随机的图片开始切换 | 布尔值 | false |
| beforeChange | 在幻灯片切换之前的回调函数 | 函数 | function(){} |
| afterChange | 在幻灯片切换之后的回调函数 | 函数 | function(){} |
| slideshowEnd | 在所有幻灯片都切换完毕后的回调函数 | 函数 | function(){} |
| lastSlide | 在最后一张幻灯片显示的回调函数 | 函数 | function(){} |
| afterLoad | 在幻灯片加载完成后的回调函数 | 函数 | function(){} |
切换效果
sliceDown
sliceDownLeft
sliceUp
sliceUpLeft
sliceUpDown
sliceUpDownLeft
fold
fade
random
slideInRight
slideInLeft
boxRandom
boxRain
boxRainReverse
boxRainGrow
boxRainGrowReverse
PREVIOUS:
NEXT:
相关插件-图片展示
讨论这个项目（20）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约
?? 日暮ぃ溪亭? 0
2020/5/22 14:49:07
查看gitHub上的源码，如果加上这个方法，就可以停止现有的slider,然后根据新的img，再调用$('#slider').nivoSlider({}）重新加载
this.clear = function() {
stop();
clearInterval(timer);
slider.removeData('nivo:vars');
slider.removeData('nivoslider');
slider.attr("class", "");
slider.attr("style", "");
$(".nivo-controlNav,.nivo-main-image,.nivo-directionNav").remove();
slider.find(".nivo-caption").remove();
}
回复
夜风 0
2019/10/16 16:46:59
-
chrome浏览器，页面缩放到100%以下，使用fold效果，slices为15时，动画效果有条纹，怎么从处理？求大神指教
夜风0
2019/10/16 16:48:32
-
页面缩放90%，slices=15时问题必现的
空白色的纯 0
2017/12/28 16:41:17
Cannot read property 'substr' of undefined
kiven_sir0
2018/3/26 17:20:22
-
解决了吗大胸弟？ 一样的问题
kiven_sir0
2018/3/26 17:34:17
-
图片加上title属性就好啦。
夏影烛花 0
2016/11/14 23:11:51
-
我想问问，图片如何做到自适应容器呀？
?、1
2018/9/14 15:48:31
通过看源码，可以在幻灯片切换之前的回调函数beforeChange中，重新计算nivo-slice的宽度及背景位置。
（以下代码中nivo-slice的宽度已通过媒体查询设置过了，只是重新计算背景位置）：
$('#slider').nivoSlider({
'controlNavThumbs': true,
'beforeChange': function() {
// 动画前重新布置slider位置，图片自适应容器
var sliceWidth = $('#slider .nivo-slice').width()
for (var i = 0; i < 15; i++) {
if (i === 15) {
$('#slider .nivo-slice').eq(i).css({
left: (sliceWidth * i) + 'px',
width: (slider.width() - (sliceWidth * i)) + 'px'
})
} else {
$('#slider .nivo-slice').eq(i).css({
left: (sliceWidth * i) + 'px',
width: sliceWidth + 'px'
})
}
}
}
})
😃
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
😃
取消回复
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
