Nivoslider插件参数和方法

Nivoslider插件参数和方法一览表

参数/方法 描述 默认值
基本
effect 图片切换效果。提供了11种效果:‘sliceDownRight‘,‘sliceDownLeft‘,‘sliceUpRight‘,‘sliceUpLeft‘, ‘sliceUpDown‘,‘sliceUpDownLeft‘, ‘fold‘,‘fade‘,‘slideInRight‘,‘slideInLeft‘,诸如渐入渐出,滑动,百叶窗等等都有。 random
animSpeed 图片切换速度(毫秒) 500
pauseTime 图片停留时间(毫秒) 3000
startSlide 开始切换的位置(即从第几张图开始切换)。 0
directionNav 是否使用左右按钮导航 true
directionNavHide 是否当鼠标滑上图片时出现左右导航按钮 true
controlNav 是否使用导航控制条,即显示每张图片的按钮 true
controlNavThumbs 是否使用缩略图控制导航 false
controlNavThumbsFromRel 是否使用图片的rel属性关联缩略图 false
controlNavThumbsSearch 缩略图类型 ‘.jpg‘
controlNavThumbsReplace 缩略图后缀 ‘_thumb.jpg‘
keyboardNav 是否支持键盘方向键切换(貌视IE不支持) true
pauseOnHover 当鼠标滑向图片时,停止切换 true
manualAdvance 是否不自动切换,当为true时,需要手动切换 false
captionOpacity 设置图片标题说明的背景透明度 0.8
方法
beforeChange 当发生切换前,回调函数  
afterChange 当发生切换后,回调函数  
slideshowEnd 完成所有的切换动作后,回调函数  
lastSlide 切换最后一张图片时,回调函数  
afterLoad 当加载完成时,回调函数

二次开发Nivoslider

需要注意使用以下一些东西:id=slider,

<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
<div id="slider" class="nivoSlider">
<img src="images/1.jpg" title="HTML5 with jQuery plugin Qucksand " />
<img src="images/2.jpg" title="HTML5 with jQuery plugin Reel " />
<img src="images/3.jpg" data-transition="sliceDown" title="HTML5 with jQuery plugin Qucksand " />
<img src="images/4.jpg" title="#htmlcaption" />
</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>

</div>
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$(‘#slider‘).nivoSlider({pauseTime: 3000});
});
</script>

时间: 2024-10-22 18:11:49

Nivoslider插件参数和方法的相关文章

php实现网站插件机制的方法

php实现网站插件机制的方法 这些天想作一个在网站中实现插件的功能,谷歌了一下,发现一篇文章感觉对我帮助很大,帖出来和大家分享,废话不多说,直接帖出代码供大家分析. 首先是插件的管理类的实现: 复制代码 代码如下: <? /** * STBLOG PluginManager Class * * 插件机制的实现核心类 * * @package STBLOG * @subpackage Libraries * @category Libraries * @author Saturn * @link

eclipse安装插件的各种方法

做为当下最流行的开源IDE之一,Eclipse的一大优势就在于其无数优秀的插件.一个好的插件可以大大的提高我们的工作效率,学习如何安装Eclipse插件自然也是必修课了.下面介绍Eclipse插件的安装方法. eclipse插件的压缩包一般有以下两种形式 *.zip的压缩包形式例如phpeclipse插件,解压目录结构一般是 phpeclipse |-features/ |-plugins/ |-*(这个不重要啦) *.jar的java包形式 为了演示如何安装,推荐2款eclipse插件 php

eclipse插件的安装方法

eclipse插件的安装方法大体有以下三种:  第一种:直接复制法:假设你的Eclipse的在(C:\eclipse), 解压你下载的 eclipse 插件或者安装eclipse 插件到指定目录AA(c:\AA)文件夹,打开AA 文件夹,在AA文件夹里分别包含两个文件夹features和plugins ,然后把两个文件夹里的文件分别复制到eclipse下所对应的文件夹下的features 和plugins 下,一般的把插件文件直接复制 到eclipse目录里是最直接也是最愚蠢的一种方法!因为日后

Discuz论坛积分商城插件安装使用方法

积分商城插件兑换是交易发布人设定物品数量.价格.交易时限参,与者使用积分出价兑换该物品,先到先得.竞拍就交易发布人设定物品数量.价格.交易时限.加价幅度.参与者使用积分出价兑换该物品,价高者得. 抽奖交易发布人设定物品数量.价格.交易时限.参与者使用积分出价兑换该物品,交易结束后在所有出价人中随机选取中奖者.Discuz!论坛积分商城插件已经被广泛用于论坛邀请码购买.虚拟物品购买.奖品兑换等. 又因为Discuz论坛有支付宝和财付通充值购买积分的功能,例如你的论坛的资源足够“优秀”的话,会员还是

微信小程序实现地图插件的调用方法

目前很多微信小程序都具备地图查看的功能,那么对于在微信小程序中如何实现地图插件的调用方法,可能很多初学小程序开发的技术人员还存在很多疑问,那么下面就来跟大家详细解答一下. 首先肯定是借助小程序自带的map组件 .wxml代码: <map id="myMap" style="width: 100%; height: 300px;" latitude="{{latitude}}" longitude="{{longitude}}&qu

【转】chrome 67版本后无法拖拽离线安装CRX格式插件的解决方法

第一种:开启开发者模式即可 (推荐) chrome  的设置 -> 更多工具 -> 扩展程序,开启开发者模式即可! 第二种方法:修改参数 首先打开下面地址:chrome://flags/#extensions-on-chrome-urls 将 disabled 改为 enable 重启即可 第三种:修改文件格式,加载扩展程序 有时候要在 chrome安装本地插件时,会报错,这时候将插件的后缀名 .crx 改为  .zip或者 .rar,然后将改好后缀名的文件解压到本地文件夹中,然后在 chro

带参数的方法

带参数的方法 1.语法: <访问修饰符>放回值类型<方法名><(形式方法列表)>{ //方法的主体     } 2.调用带参方法 语法:对象名.方法名(参数1,参数2.....参数N)

Struts2中Action接收参数的方法主要有以下三种:

Struts2中Action接收参数的方法主要有以下三种: 1.使用Action的属性接收参数(最原始的方式):     a.定义:在Action类中定义属性,创建get和set方法:     b.接收:通过属性接收参数,如:userName:     c.发送:使用属性名传递参数,如:user1!add?userName=jim: 2.使用DomainModel接收参数:     a.定义:定义Model类,在Action中定义Model类的对象(不需要new),创建该对象的get和set方法

Objective-c (多输入参数的方法)

一个方法可能具有多个输入参数.在头文件中,可以定义带有多个输入参数的方法: - (void)setIntX:(int)n andSetIntY:(int)d 下面通过一个例子来说明它的具体用法: 1 #import <Foundation/Foundation.h> 2 3 @interface Test : NSObject{ 4 int _X; 5 int _Y; 6 } 7 @property int _X,_Y; 8 9 - (void)print; 10 - (void)setX:(