示例代码：

<!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. PS制作gif动图以及背景透明与消除残影

    摘要: 用Photoshop制作gif动画的要点:在窗口菜单中找到“时间轴”选中打开时间轴,单击一帧,设置该帧显示持续时间在图层里将该帧要显示的图层显示,并将不该显示的层隐藏,新建一帧,接下来就是重复 ...

  2. 网络 TCP三次握手及滑动窗口

    三次握手客户端向服务器发出触发请求syn=1:因为这时还没有得到服务器的回应,所以ack=0服务器接收到客户端的触发请求,回复ack=1,表示已经接收到客户端的请求:同时服务器也向客户端发出触发请求, ...

  3. ubuntu 命令、linux环境变量设置

    解压与压缩: tar.gz格式tar -xzvf xxx jar格式jar -xvf xxx.jar zip格式unzip xxx.zip zip -r xxx.zip xxx unarunar -e ...

  4. python 基础-----数字，字符串，if while 循环 数据类型的转换简单介绍

    一.第一个python小程序 首先我们要知道python创立的初衷是:Python崇尚优美.清晰.简单. 所以python比起其他的语言需要的工作量少了一半都不止,比如和现在一直霸占语言排行榜  榜首 ...

  5. 铁乐学python_day22_面向对象编程4

    以下内容大部分摘自博客http://www.cnblogs.com/Eva-J/ 封装 [封装]隐藏对象的属性和实现细节,仅对外提供公共访问方式. [好处] 将变化隔离: 便于使用: 提高复用性: 提 ...

  6. eclipse tomcat部署工程路径

    C:\Users\KPL\eclipse-workspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\day18_ ...

  7. 我的第一个springboot应用+maven依赖管理

    第一步:使用Eclipse创建maven工程SpringBootFirst:工程目录如下 第二步:编写依赖文件pom.xml <project xmlns="http://maven. ...

  8. PHP安装posix、pctl扩展

    安装问题 PHP Fatal error: Uncaught Error: Call to undefined function tsingsun\swoole\server\posix_kill() ...

  9. (1)List集合 (2)Queue集合 (3)Set集合

    1.List集合(重中之重)1.1 基本概念 java.util.List接口是Collection接口的子接口,该接口中元素有先后放入次序并允许重复 该接口的主要实现类:ArrayList类.Lin ...

  10. September 29th 2017 Week 39th Friday

    Human life is ephemera, which makes it precious. 生命短暂,所以珍贵. Don't waste time on praying to the God. ...