jQuery幻燈插件：Nivo Slider

使用步驟

1、引入css文件

default.css 設置展示插件所需的樣式，像控制導航鍵，導航按鈕樣式，當然你可以自己寫個樣式

nivo-slider控制圖片樣式，插件所需的CSS文件

<link rel="stylesheet" href="default/default.css">
<link rel="stylesheet" href="css/nivo-slider.css">   

2、引入js文件

<script src="js/jquery-1.9.0.min.js"></script>
<script src="js/jquery.nivo.slider.js"></script>

  3、在body標簽中加入以下格式的html代碼

    <div id="wrapper">
        <div class="slider-wrapper theme-default">
            <div id="slider" class="nivoSlider">
                <img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" />
                <a href="http://dev7studios.com"><img src="images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" /></a>
                <img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />
                <img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" />
            </div>
            <div id="htmlcaption" class="nivo-html-caption">
                <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. 
            </div>
        </div>
    </div>

 如果你想給讓單擊圖片時打開一個頁面地址，就給圖片加個<a>標簽鏈接

如果你想給圖片加個標題說明，可以使用title屬性，圖片下會形成黑色橫條

如果你想讓標題有樣式或者鏈接，可以將圖片的title屬性設置為像"#htmlcaption"，即#號后面緊跟指向的ID，如上所示代碼，在ID為htmlcaption的DIV中，你可以編輯你想要的HTML代碼，Nivoslider插件支持html的圖片標題。

 4、然后調用Nivoslider插件。

    <script type="text/javascript">
        $(window).load(function() {
            $('#slider').nivoSlider();
        });
    </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(){}

 示例代碼如下：

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
        slices: 15, // For slice animations
        boxCols: 8, // For box animations
        boxRows: 4, // For box animations
        animSpeed: 500, // Slide transition speed
        pauseTime: 3000, // How long each slide will show
        startSlide: 0, // Set starting Slide (0 index)
        directionNav: true, // Next & Prev navigation
        directionNavHide: true, // Only show on hover
        controlNav: true, // 1,2,3... navigation
        controlNavThumbs: false, // Use thumbnails for Control Nav
        controlNavThumbsFromRel: false, // Use image rel for thumbs
        controlNavThumbsSearch: '.jpg', // Replace this with...
        controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
        keyboardNav: true, // Use left & right arrows
        pauseOnHover: true, // Stop animation while hovering
        manualAdvance: false, // Force manual transitions
        captionOpacity: 0.8, // Universal caption opacity
        prevText: 'Prev', // Prev directionNav text
        nextText: 'Next', // Next directionNav text
        randomStart: false, // Start on a random slide
        beforeChange: function(){}, // Triggers before a slide transition
        afterChange: function(){}, // Triggers after a slide transition
        slideshowEnd: function(){}, // Triggers after all slides have been shown
        lastSlide: function(){}, // Triggers when last slide is shown
        afterLoad: function(){} // Triggers when slider has loaded
    });
});
</script>

 

通過data-transition="***"來改變當前圖片的切換樣式，不寫默認是隨機

如 <img src="image/b1.jpg" data-transition="boxRain"/>

切換效果

• sliceDown

• sliceDownLeft

• sliceUp

• sliceUpLeft

• sliceUpDown

• sliceUpDownLeft

• fold

• fade

• random

• slideInRight

• slideInLeft

• boxRandom

• boxRain

• boxRainReverse

• boxRainGrow

• boxRainGrowReverse