zoukankan      html  css  js  c++  java
  • Nivo Slider用法

    示例代码:

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

  • 相关阅读:
    部署Packbeat--Elastic Stack之十
    部署Winlogbeat--Elastic Stack之九
    解决git clone pull push慢必杀技
    Android内存泄露分析及内存管理小记
    android 8.0以后(sdk26)启动前台服务的问题探究
    打包编译.so流程
    AS升级编译报错:The SourceSet 'instrumentTest' is not recognized by the Android Gradle Plugin.
    三层fragment嵌套,接口回调方式
    recyclerview的onBindViewHolder中if之后要写else,否则可能显示有问题
    2018
  • 原文地址:https://www.cnblogs.com/tmdhhl/p/nivo.html
Copyright © 2011-2022 走看看