示例代码：
<!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