示例代码：

<!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. 使用office打印到文件功能进行打印测试

     大家在日常的支持工作中常会遇到各种打印问题,所以进行一些打印测试也在所难免.但是每次跑来跑去浪费了宝贵的时间,打印又浪费了纸张资源.我们也会想到安装虚拟打印机,但因为没有合适的软件,结果是我们只 ...

  2. react-ssr

    为什么使用SSR 与传统 SPA(Single-Page Application - 单页应用程序)相比 服务器端渲染(SSR)的优势主要在于: 更好的 SEO,由于搜索引擎爬虫抓取工具可以直接查看完 ...

  3. LeetCode题解之Unique Morse Code Words

    1.题目描述 2.题目分析 将words 中的每一个string  直接翻译成对应的Morse 码,然后将其放入 set 中,最后返回set的大小即可,此处利用的set 中元素不重复的性质. 3.代码 ...

  4. MVC技术的面试问题

    MVC中的三种方式: ORM框架:对象关系映射关系 ,面向对象的对象模型和关系型数据之间的相互转换.基于关系型数据库的数据存储,实现一个虚拟的面向对象的数据访问接口.只要提供了持久化类与表的映射关系, ...

  5. MySQL上机实习报告（一）

    一．实习内容    利用wamp进行MySQL上机实习,建立数据库和一个学生信息表,并能对建的表进行数据插入.修改.查询和删除等内容. 二．实习目的 能将课堂上所学的内容运用到实际的上机操作中,进一步 ...

  6. 产生渐变色的view

    产生渐变色的view 效果 源码 https://github.com/YouXianMing/UI-Component-Collection // // GradientColorView.h // ...

  7. 精简计算UITableView文本高度

    精简计算UITableView文本高度 本人视频教程系类   iOS中CALayer的使用 最终效果: 核心源码(计算文本高度的类) NSString+StringHeight.h 与 NSStrin ...

  8. java判断字符串内容

    java判断字符串是否全为数字 String str = "032";boolean isNum = str.matches("[0-9]+"); java判断 ...

  9. Django ImportError 模块路径正确，且将文件夹设置为Source Root

    问题描述: 在用PyCharm进行Django项目开发时,由于业务需求需要增加一个外键字段,但在引入外键关联的model时,报错ImportError 解决方案: 无奈中,尝试更改导入模块语句的位置, ...

  10. django 错误之 OSError: mysql_config not found

    pip 导入包时出现如下错误 Complete output from command python setup.py egg_info: /bin/: mysql_config: not found ...