首页 > 代码库 > nivo slider插件使用方法

nivo slider插件使用方法

2024-08-16 13:28:09   217人阅读

引入文件
<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
 
nivo slider插件使用方法






























        

            
                
                  
                
                

                    联系

                    我们