示例代码：

<!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. Android Service不能再详细的教程

    这篇包含了: Service后台服务.前台服务.IntentService.跨进程服务.无障碍服务.系统服务 几乎所有Android Service相关的东西. 前言 作为四大组件之一的Service ...

  2. 深入理解net core中的依赖注入、Singleton、Scoped、Transient（二）

    相关文章: 深入理解net core中的依赖注入.Singleton.Scoped.Transient(一) 深入理解net core中的依赖注入.Singleton.Scoped.Transient ...

  3. LeetCode题解之Peak Index in a MountainArray

    1 题目描述 2.问题分析 直接从后向前遍历,找到 A[i] > A[i-1] 即可. 3.代码 int peakIndexInMountainArray(vector<int>&a ...

  4. Oracle EBS 清除并发请求和（或）管理器数据 请求

    请求说明:该请求可以清除平时提交的请求日志文件.并发管理器的日志文件.报表输出文件.并发请求和并发管理器进程的历史记录信息. 参数说明:(红色标注字段为必输项)1．  实体:ALL:清除请求历史记录. ...

  5. oracle 28001错误 密码过期失效

    背景 服务器演示地址,无法使用.排查原因,是数据库密码有问题,报28001错误 问题 确定是oracle密码机制,180失效了 解决 1.进入sqlplus模式 sqlplus / as sysdba ...

  6. win8中 cmd直接以管理员权限运行

    一.组合键 WIN+X   二.锁定到任务栏,方便以后快速启动     三.控制面板->控制中心     四.更改用户账户控制设置--调到最低 好了,点击任务栏的命令提示符

  7. TreeSet集合的add()方法源码解析(01.Integer自然排序)

    >TreeSet集合使用实例 >TreeSet集合的红黑树 存储与取出(图) >TreeSet的add()方法源码     TreeSet集合使用实例 package cn.itca ...

  8. Django 自定义模板标签和过滤器

    1.创建一个模板库 使用模板过滤器的时候,直接把过滤器写在app里,例如:在app里新建一个templatetags的文件夹,这个目录应当和 models.py . views.py 等处于同一层次. ...

  9. VM下，装centos7系统，配置nginx的问题

    一.流程 1.先安装nginx依赖的包 (1)yum install gcc-c++ (2)yum install -y pcre pcre-devel (3)yum install -y zlib ...

  10. python-一个小爬虫，爬取图片

    import re import urllib.request # 爬取网页 def getHtml(url): page=urllib.request.urlopen(url) html=page. ...