当前位置: 首页 > 工具软件 > Nivo Slider > 使用案例 >

nivo slider插件使用方法

刘浩思
2023-12-01
引入文件
<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

 

转载于:https://www.cnblogs.com/tudou1223/p/5958398.html

 类似资料: