博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Nivoslider插件参数和方法
阅读量:6431 次
发布时间:2019-06-23

本文共 1794 字,大约阅读时间需要 5 分钟。

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" alt="" title="HTML5 with jQuery plugin Qucksand " />
<img src="images/2.jpg" alt="" title="HTML5 with jQuery plugin Reel " />
<img src="images/3.jpg" alt="" data-transition="sliceDown" title="HTML5 with jQuery plugin Qucksand " />
<img src="images/4.jpg" alt="" 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>

转载于:https://www.cnblogs.com/jackzzx/p/4599108.html

你可能感兴趣的文章
客户网页WIZnet无线解决方案 之 太阳能逆变器
查看>>
CCRepeatForever和CCDelayTime
查看>>
android jni aotf 错误
查看>>
Azkaban的功能特点(二)
查看>>
[RxJS] Add debug method to Observable in TypeScript
查看>>
1、金融之关于BIAS
查看>>
[转]ASP.NET Core基本原理(11)-管理应用程序状态
查看>>
VS Code搭建.NetCore开发环境(一)
查看>>
01字典树贪心查询+建立+删除(个人模版)
查看>>
java-信息安全(十一)-非对称加密算法ECC以及ECDSA签名
查看>>
(转)Flex的编译过程--ActionScript字节码(ABC)
查看>>
Directory Listing Denied
查看>>
今天讲座的感悟--java
查看>>
o(1)复杂度之双边滤波算法的原理、流程、实现及效果。
查看>>
Logcat多tag过滤
查看>>
corner2
查看>>
我见过的几种类型的员工(转)
查看>>
web前端的十种jquery特效及源码下载
查看>>
poj 3414 Pots (bfs+线索)
查看>>
Binary search
查看>>