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" 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>


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM