示例代码：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="../themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../themes/light/light.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../themes/dark/dark.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../themes/bar/bar.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../css/nivo-slider.css">
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
</head> <body>
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="../images/nemo.jpg" alt="" />
<a href="http://dev7studios.com"><img src="../images/toystory.jpg" alt="" title="#htmlcaption" /></a>
<img src="../images/up.jpg" alt="" title="This is an example of a caption" />
<img src="../images/walle.jpg" alt="" />
</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>
</div>
<script type="text/javascript" src="../js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).on('load', function() {
// $('#slider').nivoSlider();
$('#slider').nivoSlider({
effect: 'boxRain', // Specify sets like: 'fold,fade,sliceDown'
slices: 15, // For slice animations
boxCols: 6, // For box animations
boxRows: 2, // For box animations
animSpeed: 500, // Slide transition speed
pauseTime: 3000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation
controlNav: false, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
randomStart: false, // Start on a random slide
beforeChange: function() {}, // Triggers before a slide transition
afterChange: function() {}, // Triggers after a slide transition
slideshowEnd: function() {}, // Triggers after all slides have been shown
lastSlide: function() {}, // Triggers when last slide is shown
afterLoad: function() {} // Triggers when slider has loaded
});
});
</script>
</body> </html>
官网
https://docs.themeisle.com/category/486-nivo-slider