示例代码：

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

Nivo Slider用法的更多相关文章

  1. 推荐:图片轮播插件Nivo Slider

          因为项目需要一款切换样式多一些的轮播插件,不经意找到了NivoSlider,非常好用,比bootstrap要好用,而且样式丰富.值得注意的是,这款插件是在MIT协议下免费的.        ...

  2. Nivo Slider - 世界上最棒的 jQuery 图片轮播插件

    Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...

  3. jQuery幻灯插件：Nivo Slider

    使用步骤 1.引入css文件 default.css 设置展示插件所需的样式,像控制导航键,导航按钮样式,当然你可以自己写个样式 nivo-slider控制图片样式,插件所需的CSS文件 <li ...

  4. Drupal 7 建站学习手记（四）：怎样改动Nivo Slider模块的宽高

    背景 Nivo Slider模块默认大小是用的height: 100%, width 100%, 但IE7及下面的浏览器是不支持百分比宽高的, 而我的项目目标用户基本都是使用XP系统,项目需求是必须兼 ...

  5. 图片轮播插件Nivo Slider

    推荐:图片轮播插件Nivo Slider         因为项目需要一款切换样式多一些的轮播插件,不经意找到了NivoSlider,非常好用,比bootstrap要好用,而且样式丰富.值得注意的是, ...

  6. js slider

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...

  7. [转]nopCommerce Widgets and How to Create One

    本文转自:https://dzone.com/articles/what-are-nopcommerce-widgets-and-how-to-create-one A widget is a sta ...

  8. 在网站开发中很有用的8个 jQuery 效果【附源码】

    jQuery 作为最优秀 JavaScript 库之一,改变了很多人编写 JavaScript 的方式.它简化了 HTML 文档遍历,事件处理,动画和 Ajax 交互,而且有成千上万的成熟 jQuer ...

  9. 12款经典的白富美型—jquery图片轮播插件—前端开发必备

    图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...

随机推荐

  1. linux 网络命令ping、关闭防火墙、ifconfig、ip addr、setup、nmtui、write、wall、mail

    ping /bin/ping语法:ping [选项] IP地址 选项:-c 指定发送次数功能描述:测试网络连通性 ping -c 4 192.168.1.101 关闭防火墙systemctl stop ...

  2. 0java之泛型解说

    1.集合中只能装入引用数据类型,不能装入基本数据类型.如,装入int类型的数值123会自动装箱. 2.开发人员装入集合的数据类型不确定,所以它被设计成可以装入所有的Object. 3.新的问题产生,装 ...

  3. 创建完美SDK的10个技巧

    [编者按]本文作者为 Gal Lavinsky,文中将列出10个零基础小技巧,帮你创建完美的Java SDK.文章系国内 ITOM 管理平台 OneAPM 编译呈现.以下为正文. 本文起源于笔者朋友的 ...

  4. 5.String StringBuffer StringBuilder

    String,StringBuffer和StringBuilder三者的讲解 对于StringBuffer和StringBuilder是对Stirng的一个优化. 之前已经说过了,String对象一旦 ...

  5. 【转】stropts.h: No such file or directory – How to Fix

    原文地址:stropts.h: No such file or directory – How to Fix 作者:xjc2694 It is a known issue that modern Li ...

  6. [翻译] CBStoreHouseRefreshControl

    CBStoreHouseRefreshControl What is it? A fully customizable pull-to-refresh control for iOS inspired ...

  7. 零基础图文傻瓜教程接入Facebook的sdk

    零基础图文傻瓜教程接入Facebook的sdk 本人视频教程系类   iOS中CALayer的使用 0. 先解决你的 VPN FQ上外网问题,亲,解决这一步才能进行后续操作^_^. 1. 点击右侧链接 ...

  8. Linux setenforce命令详解[SeLinux操作]

    SELinux(Security-Enhanced Linux) 是美国国家安全局(NSA)对于强制访问控制的实现,是 Linux历史上最杰出的新安全子系统. 关闭SELinux 临时生效: 命令临时 ...

  9. 【Excel】单元格的下拉框是怎么做的？

    如果我们希望将产品这一列的每个单元格都能选择 左侧的产品就好了,就像这样 这里使用的是"验证数据有效性"功能 在这里: 点击F,选择F列后,打开“数据验证”,如图,选择序列,选择来 ...

  10. [BZOJ 4031][LOJ 2122][HEOI 2015] 小Z的房间

    [BZOJ 4031][LOJ 2122][HEOI 2015] 小Z的房间 题意 给定一个 \(n\times m\) 的矩阵, 一些格子是障碍, 相邻的格子(四联通)之间可以连边, 求把非障碍的格 ...