示例代码：

<!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开启线程的误区

    发现一些刚学android的人,和我当初一样,对android的线程会存在着一定误区. 在android中,开启新线程时,一些人会用以下方法: new Handler().post(r); 但是这样并 ...

  2. linux yum 安装wget、gcc、ifconfig、vim、setup

    安装wgetyum -y install wget安装gcc c语言编译器yum -y install gcc安装ifconfigyum -y install net-tools.x86_64安装vi ...

  3. 初次使用git就遭遇不测，提示没有这个服务连接和需要配置git的一个http参数 NO network connection，SSl host could not be verified ...

    第一次使用git 拉取服务上的项目到本地,结果,在拿到访问的url地址后,输入用户名密码,失败了. --eclispe  4.5.3 继承了git客户端插件的版本 ------下一步后,报错 NO n ...

  4. python之线程、进程

    线程语法 class Thread(_Verbose): """A class that represents a thread of control. This cla ...

  5. springMVC入门-09

    这一节介绍SpringMVC对文件上传的支持,该功能支持需要使用到两个jar包:cmmons-fileupload-1.2.2.jar和commons-io-2.1.jar. 在controller类 ...

  6. C++ 入门随手笔记及联系

    一.第一个C++程序 1.文件扩展名  C++源代码的文件扩展名.cpp.C.cxx.c(需要指定编译语言)  自定义的头文件依然保留.h 2.头文件  C++标准库的头文件不带.h,最常用的是ios ...

  7. Azure Document DB Repository 的实现

    阅读 需要大约  5 分钟. 前景: Azure Cosmos DB 由 Microsoft 提供,是全球分布式多模型数据库. 通过 Azure Cosmos DB 跨任意数量的 Azure 地理区域 ...

  8. 有序字典（OrderedDict）、默认字典（defaultdict）内置函数

    http://www.cnblogs.com/wupeiqi/articles/5115190.html import collections do = collections.OrderedDict ...

  9. UNIX高级环境编程（4）Files And Directories - umask、chmod、文件系统组织结构和链接

    本篇主要介绍文件和文件系统中常用的一些函数,文件系统的组织结构和硬链接.符号链接. 通过对这些知识的了解,可以对Linux文件系统有更为全面的了解.   1 umask函数 之前我们已经了解了每个文件 ...

  10. 企业级实时数据文件同步服务_【all】

    全网数据定时备份方案[cron + rsync] [更多参考]全网数据定时备份方案[cron + rsync] 全网数据实时备份方案[inotify,sersync] [更多参考]全网数据实时备份方案 ...