jQuery图片幻灯片插件 jQuery.nivo.slider.js用法

号称最好的JQUERY幻灯片,虽然夸夸其谈,但也算简单易用

使用步骤

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>
        <img src="images/slide3.jpg" alt="" title="This is an example of a caption">
        <img src="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

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

   官网


赞(52) 打赏
未经允许不得转载:优客志 » 前端设计
分享到:

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏