分享一個超棒的免費(fèi)jQuery幻燈插件：Nivo Slider

最近需要尋找一個比較酷的頁面幻燈顯示插件，發(fā)現(xiàn)Nivo Slider是一個非常不錯的選擇。如果你需要演示新產(chǎn)品，或者你需要比較酷的幻燈片轉(zhuǎn)化效果，Nivo幻燈是你的一個選擇之一。

主要特性：

號稱世界最棒的jQuery幻燈插件
16種幻燈變化的特效
簡單并且配置靈活
體積小并且符合語義
jQuery插件使用免費(fèi)（但是wordpress插件需要付費(fèi)：20美元）

這里我稍微說一下，jQuery的插件到處都有，我們需要有目的的選擇一下插件，這個網(wǎng)站擁有自己獨(dú)立的網(wǎng)站，網(wǎng)站非常正規(guī)，別的不說，使用著就放心。而且有技術(shù)支持團(tuán)隊，不過只支持付費(fèi)用戶。幻燈效果和效率都不錯，堪比flash的幻燈。例如，這個flash的幻燈顯示。

Javascript代碼

類庫引用：

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

調(diào)用代碼：

$(window).load(function() {
    $('#slider').nivoSlider();
});

你可以自定義如下選項：

effect: 設(shè)置幻燈變化效果，可以使用'random', 或者指定效果如, 'fold,fade,sliceDown'
slices: slice動畫效果參數(shù)
boxCols: box動畫效果參數(shù)
boxRows:box動畫效果參數(shù)
animSpeed: 動畫變化速度
pauseTime: 每個幻燈時間
startSlide: 起始幻燈
directionNav: 是否顯示“上一個”和“下一個”導(dǎo)航
directionNavHide: 是否懸浮顯示導(dǎo)航
controlNav: 是否顯示導(dǎo)航控制
controlNavThumbs: 導(dǎo)航是否使用縮略圖
controlNavThumbsFromRel: 是否讓圖片使用rel
controlNavThumbsSearch: 導(dǎo)航縮略圖后綴
controlNavThumbsReplace: 導(dǎo)航縮略圖替換
keyboardNav: 是否鍵盤導(dǎo)航
pauseOnHover: 懸浮是否停止
manualAdvance: 是否手動變化幻燈
captionOpacity: 標(biāo)題透明度
prevText: 上一張文字設(shè)定
nextText: 下一張文字設(shè)定
randomStart: 是否隨機(jī)開始
beforeChange: 函數(shù)，在幻燈變化前調(diào)用
afterChange:函數(shù)，在幻燈變化后調(diào)用
slideshowEnd:函數(shù)，在幻燈變化完成調(diào)用
lastSlide:函數(shù)，在最后一個幻燈變化完成調(diào)用
afterLoad: 函數(shù)，slider加載后調(diào)用

代碼示例：

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

HTML代碼

<div class="slider-wrapper theme-default">
    <div class="ribbon"></div>
    <div id="slider" class="nivoSlider">
        <img src="images/toystory.jpg" alt=""/>
        <a href="http://dev7studios.com"><img src="images/up.jpg" alt="" title="This is an example of a caption"/></a>
        <img src="images/walle.jpg" alt="" data-transition="slideInLeft"/>
        <img src="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>

如何為每一個幻燈自定義變化效果：

<img src="images/slide1.jpg" alt="" data-transition="slideInLeft"/>

希望大家喜歡！

posted @ 2011-11-24 20:04 igeekbar 閱讀(15095) 評論(5) 收藏舉報

刷新頁面返回頂部

分享一個超棒的免費(fèi)jQuery幻燈插件：Nivo Slider

Javascript代碼

公告

中文互聯(lián)： GBin1.com | RSS訂閱 | 郵件訂閱 | 手機(jī)訂閱