Nivoslider中怎么實現(xiàn)圖片切換效果

本篇文章為大家展示了Nivoslider中怎么實現(xiàn)圖片切換效果，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

HTML

<p id="slider" class="nivoSlider">    <img src="images/s1.jpg" alt="" title="好漂亮的狗狗..."  />    <a href="http://www.xuebuyuan.com"><img src="images/s2.jpg" alt="" title="圖片標題" /></a>    <img src="images/s3.jpg" alt="" title="#htmlcaption" /> </p> <p id="htmlcaption" class="nivo-html-caption">    <strong>圖片標題</strong>，支持HTML標簽 <a href="http://www.xuebuyuan.com">xuebuyuan.com</a>. </p>

在ID為slider的DIV中，放置了三張需要切換的圖片。如果你想給讓單擊圖片時打開一個頁面地址，就給圖片加個<a>標簽鏈接，如果你想給圖片加個標題說明，可以使用title屬性，如果你想讓標題有樣式或者鏈接，可以將圖片的title屬性設(shè)置為像"#htmlcaption"，即#號后面緊跟指向的ID，如上所示代碼，在ID為htmlcaption的DIV中，你可以編輯你想要的HTML代碼，Nivoslider插件支持html的圖片標題。

CSS

首先需要載入插件所需的CSS文件。

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

然后設(shè)置展示插件所需的樣式，像控制導(dǎo)航鍵，導(dǎo)航按鈕樣式，當然你可以自己寫個樣式，代碼參照如下：

#slider{width:680px; height:272px; margin:40px auto;background:url(images/loading.gif) no-repeat 50% 50%;} #slider img {position:absolute;top:0px;left:0px;display:none;} .nivo-controlNav{position:absolute;left:300px;bottom:-42px;} .nivo-controlNav a {display:block;width:22px;height:22px;background:url(images/bullets.png) no-repeat;text-indent:-9999px;border:0;margin-right:3px;float:left;} .nivo-controlNav a.active {background-position:0 -22px;} .nivo-directionNav a {display:block;width:30px;height:30px;background:url(images/arrows.png) no-repeat;text-indent:-9999px;border:0;} a.nivo-nextNav {background-position:-30px 0;right:15px;} a.nivo-prevNav {left:15px;} .nivo-caption {text-shadow:none; font-family: Helvetica, Arial, sans-serif;} .nivo-caption a {color:#efe9d1;text-decoration:underline;}

jQuery

先載入jQuery庫和插件。

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

然后調(diào)用Nivoslider插件。

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

這樣，一個非常漂亮的圖片切換效果就完成了。如果你需要特別的要求可以修改插件的配置參數(shù)和方法函數(shù)。

Nivoslider插件參數(shù)和方法一覽表

參數(shù)/方法            描述            默認值        基本        effect            圖片切換效果。提供了11種效果：'sliceDownRight','sliceDownLeft','sliceUpRight','sliceUpLeft', 'sliceUpDown','sliceUpDownLeft', 'fold','fade','slideInRight','slideInLeft'，諸如漸入漸出，滑動，百葉窗等等都有。            random        animSpeed            圖片切換速度（毫秒）            500        pauseTime            圖片停留時間（毫秒）            3000        startSlide            開始切換的位置（即從第幾張圖開始切換）。            0        directionNav            是否使用左右按鈕導(dǎo)航            true        directionNavHide            是否當鼠標滑上圖片時出現(xiàn)左右導(dǎo)航按鈕            true        controlNav            是否使用導(dǎo)航控制條，即顯示每張圖片的按鈕            true        controlNavThumbs            是否使用縮略圖控制導(dǎo)航            false        controlNavThumbsFromRel            是否使用圖片的rel屬性關(guān)聯(lián)縮略圖            false        controlNavThumbsSearch            縮略圖類型            '.jpg'        controlNavThumbsReplace            縮略圖后綴            '_thumb.jpg'        keyboardNav            是否支持鍵盤方向鍵切換（貌視IE不支持）            true        pauseOnHover            當鼠標滑向圖片時，停止切換            true        manualAdvance            是否不自動切換，當為true時，需要手動切換            false        captionOpacity            設(shè)置圖片標題說明的背景透明度            0.8        方法        beforeChange            當發(fā)生切換前，回調(diào)函數(shù)                     afterChange            當發(fā)生切換后，回調(diào)函數(shù)                     slideshowEnd            完成所有的切換動作后，回調(diào)函數(shù)                     lastSlide            切換最后一張圖片時，回調(diào)函數(shù)                     afterLoad            當加載完成時，回調(diào)函數(shù)             

上述內(nèi)容就是Nivoslider中怎么實現(xiàn)圖片切換效果，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注億速云行業(yè)資訊頻道。