号称最好的JQUERY幻灯片-NIVO SLIDER

最新推荐文章于 2020-12-20 05:04:44 发布

Allen_Kao

最新推荐文章于 2020-12-20 05:04:44 发布

阅读量832

点赞数

CC 4.0 BY-SA版权

分类专栏： WordPress

本文链接：https://blog.youkuaiyun.com/gsls181711/article/details/40679715

WordPress 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何在网页中配置并使用Nivo Slider插件实现幻灯片效果。包括引入必要的JS和CSS文件、设置初始化代码及HTML结构，并提供了详细的参数配置说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、引入以下的js和css文件

<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"type="text/javascript"></script>

<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>

2、在head标签中加入以下js代码

<script type="text/javascript">

    $(window).load(function() {

        $('#slider').nivoSlider();

    });

</script>

3、在body标签中加入以下格式的html代码

<div class="slider-wrapper">

    <div id="slider" class="nivoSlider">

        <img src="images/slide1.jpg" alt=""> <a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" title="#htmlcaption"></a> <imgsrc="images/slide3.jpg" alt="" title="This is an example of a caption"> <imgsrc="images/slide4.jpg" alt="">

    </div>

</div>

<div id="htmlcaption" class="nivo-html-caption">

    <strong>This</strong> is an example of a <em>HTML</em> caption with <ahref="#">a link</a>.

</div>

参数配置

参数名参数说明可选值默认值
参数名参数说明参数取值默认值
effect 切换样式字符串 ‘random’
slices 针对slice样式的切换级数，数字越大切换越慢过渡越小数字 15
boxCols 针对box样式的切换列数，数字越大切换越慢过渡越小数字 8
boxRows 针对box样式的切换行数，数字越大切换越慢过渡越小数字 4
animSpeed 切换动画的速度数字 500
pauseTime 相邻两张幻灯片切换的间隔时间数字 3000
startSlide 从第几张图片开始切换数字 0
directionNav 是否显示‘上一张/下一张’导航布尔值 true
controlNav 是否显示数字导航布尔值 true
controlNavThumbs 是否用缩略图导航布尔值 false, // Use thumbnails for Control Nav
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