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

查看原文

查看在線演示Demo和更多原文內容：http://www.ibloger.net/article/1170.html