学习slidesjs幻灯插件的时候翻到的这个，比起slidesjs，nivo slider提供了更多的动画效果，更为丰富的自定义选项。当然，对于一个站点来说，丰富的内容才是关键，过度追求华丽的效果，特别对于带宽较小的服务器来说，无异于买椟还珠。
最简单的实例
测试插件的时候习惯用字节的静态资源库，几行代码就能搞定运行环境，有网就能用：
<!DOCTYPE html>
<head>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js" type="application/javascript"></script>
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery-nivoslider/3.2/jquery.nivo.slider.min.js" type="application/javascript"></script>
<link href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery-nivoslider/3.2/nivo-slider.min.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="slider">
<img src="./test1.jpg">
<img src="./test2.jpg">
<img src="./test3.jpg">
</div>
<script type="text/javascript">
$(function(){
$('#slider').nivoSlider();
});
</script>
</body>
</html>设置项目概览
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'random',
slices: 15,
boxCols: 8,
boxRows: 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(){}
});
});
</script>支持效果列表
默认的效果是随机选择，如果需要指定效果，可以从以下效果中自行选择：
- 'sliceDownRight'
- 'sliceDownLeft'
- 'sliceUpRight'
- 'sliceUpLeft'
- 'sliceUpDown'
- 'sliceUpDownLeft'
- 'fold'
- 'fade'
- 'boxRandom'
- 'boxRain'
- 'boxRainReverse'
- 'boxRainGrow'
- 'boxRainGrowReverse'
指定效果并不仅限于一种，也可以同时指定若干种，程序会在指定的效果范围内随机选择：
effect:'fold,fade'，修改导航按钮的方式
不喜欢用默认的文字导航按钮，我们可以尝试导入font awesoem图标库，然后用图标来代替导航按钮：
<!DOCTYPE html>
<head>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js" type="application/javascript"></script>
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery-nivoslider/3.2/jquery.nivo.slider.min.js" type="application/javascript"></script>
<link href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery-nivoslider/3.2/nivo-slider.min.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" media="all" href="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="slider">
<img src="./test1.jpg">
<img src="./test2.jpg">
<img src="./test3.jpg">
</div>
<script type="text/javascript">
$(function(){
$('#slider').nivoSlider(
{
prevText: '<i class="fa fa-chevron-circle-left" aria-hidden="true"></i>',
nextText: '<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>'
}
);
});
</script>
</body>
</html>