Nivo Slider用法

来源：cnblogs　　作者：透明的洪湖里　　时间：2019/3/14 8:49:04　　对本文有异议

示例代码：

<!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>

View Code

官网

https://docs.themeisle.com/category/486-nivo-slider

原文链接：http://www.cnblogs.com/tmdhhl/p/nivo.html

友情链接：直通硅谷　点职佳　北美留学生论坛

jQuery热门文章

jQuery推荐文章