溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了Nivoslider中怎么實現圖片切換效果，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
<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屬性設置為像"#htmlcaption"，即#號后面緊跟指向的ID，如上所示代碼，在ID為htmlcaption的DIV中，你可以編輯你想要的HTML代碼，Nivoslider插件支持html的圖片標題。
首先需要載入插件所需的CSS文件。
<link rel="stylesheet" type="text/css" href="nivo-slider.css" />
然后設置展示插件所需的樣式，像控制導航鍵，導航按鈕樣式，當然你可以自己寫個樣式，代碼參照如下：
#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庫和插件。
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
然后調用Nivoslider插件。
$(function() {
$('#slider').nivoSlider();
});
這樣，一個非常漂亮的圖片切換效果就完成了。如果你需要特別的要求可以修改插件的配置參數和方法函數。
參數/方法 描述 默認值 基本 effect 圖片切換效果。提供了11種效果：'sliceDownRight','sliceDownLeft','sliceUpRight','sliceUpLeft', 'sliceUpDown','sliceUpDownLeft', 'fold','fade','slideInRight','slideInLeft'，諸如漸入漸出，滑動，百葉窗等等都有。 random animSpeed 圖片切換速度（毫秒） 500 pauseTime 圖片停留時間（毫秒） 3000 startSlide 開始切換的位置（即從第幾張圖開始切換）。 0 directionNav 是否使用左右按鈕導航 true directionNavHide 是否當鼠標滑上圖片時出現左右導航按鈕 true controlNav 是否使用導航控制條，即顯示每張圖片的按鈕 true controlNavThumbs 是否使用縮略圖控制導航 false controlNavThumbsFromRel 是否使用圖片的rel屬性關聯縮略圖 false controlNavThumbsSearch 縮略圖類型 '.jpg' controlNavThumbsReplace 縮略圖后綴 '_thumb.jpg' keyboardNav 是否支持鍵盤方向鍵切換（貌視IE不支持） true pauseOnHover 當鼠標滑向圖片時，停止切換 true manualAdvance 是否不自動切換，當為true時，需要手動切換 false captionOpacity 設置圖片標題說明的背景透明度 0.8 方法 beforeChange 當發生切換前，回調函數 afterChange 當發生切換后，回調函數 slideshowEnd 完成所有的切換動作后，回調函數 lastSlide 切換最后一張圖片時，回調函數 afterLoad 當加載完成時，回調函數
上述內容就是Nivoslider中怎么實現圖片切換效果，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
