zoukankan      html  css  js  c++  java
  • nivo slider插件使用方法

    引入文件
    <link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen"> <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script> <script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>

    参数配置

    
    
    参数名 参数说明 参数类型 默认值
    effect 切换样式  字符串 ‘random’
    slices 针对slice样式的切换级数,数字越大切换越慢过渡越小 数字 15
    boxCols 针对box样式的切换列数,数字越大切换越慢过渡越小 数字 8
    boxRows 针对box样式的切换行数,数字越大切换越慢过渡越小 数字 4
    animSpeed 切换动画的速度 数字 500
    pauseTime 相邻两张幻灯片切换的间隔时间 数字 3000
    startSlide 从第几张图片开始切换 数字 0
    directionNav 是否显示‘上一张/下一张’导航 布尔值 true
    controlNav 是否显示数字导航 布尔值 true
    controlNavThumbs 是否用缩略图导航 布尔值 false
    pauseOnHover 当鼠标移到幻灯片上的时候是否暂停切换 布尔值 true
    manualAdvance 是否强制手动切换 布尔值 false
    prevText ’上一张‘的文字  字符串 ‘Prev’
    nextText ’下一张‘的文字 字符串 ‘Next’
    randomStart 是否从一张随机的图片开始切换 布尔值 false
    beforeChange 在幻灯片切换之前的回调函数 函数 function(){}
    afterChange 在幻灯片切换之后的回调函数 函数 function(){}
    slideshowEnd 在所有幻灯片都切换完毕后的回调函数 函数 function(){}
    lastSlide 在最后一张幻灯片显示的回调函数 函数 function(){}
    afterLoad 在幻灯片加载完成后的回调函数 函数 function(){}
    
    

    切换效果

    
    
    • sliceDown

    • sliceDownLeft

    • sliceUp

    • sliceUpLeft

    • sliceUpDown

    • sliceUpDownLeft

    • fold

    • fade

    • random

    • slideInRight

    • slideInLeft

    • boxRandom

    • boxRain

    • boxRainReverse

    • boxRainGrow

    • boxRainGrowReverse

    
    
    

    说明:

    1. Nivo Slider官网地址:http://dev7studios.com/plugins/nivo-slider,可下载最新版本的Nivo Slider

    2. JQuery需要v1.7+以上版本,本实例使用的是jQuery v1.10.1

     

    参考网址:

    [1]Nivo Slider 简要使用文档.http://www.2cto.com/kf/201202/119195.html.

    [2]基于JQuery Nivo Slider幻灯插件.http://www.111cn.net/wy/jquery/40801.htm.

    [3]Nivo Slider官网教程:http://docs.dev7studios.com/jquery-plugins/nivo-slider

     
  • 相关阅读:
    C# 使用 Microsoft.Feeds 组件获取 RSS 全文
    使用 Jquery 做类似搜索引擎效果
    ASP.NET MVC 利用 IHttpModule 实现路由调试
    Python 爬虫类库 Selenium 的常用方法介绍
    C# 中 New 关键词的几种用法
    ASP.NET 使用 IIS URL Rewrite 模块实现伪静态
    Java 源码分析之 HashTable
    Java 类中代码块和构造方法的执行顺序
    C# 中使用 FFmpeg.NET
    C# 项目中使用 ServiceStack.Redis 操作 Redis
  • 原文地址:https://www.cnblogs.com/tudou1223/p/5958398.html
Copyright © 2011-2022 走看看