帶多種過渡動畫的響應式jQuery幻燈片插件

2024-04-27 15:01:54

字體：大中小

來源：轉載

供稿：網友

Nivo-Slider是一款非常強大的響應式jQuery幻燈片插件。該幻燈片插件內置有16種不同的動畫過渡效果。它提供了豐富的參數來控制幻燈片的播放。它使用簡單，并且可以兼容IE8瀏覽器。

在線預覽源碼下載

使用方法

使用Nivo-Slider幻燈片需要引入nivo-slider.CSS，jQuery(1.7+)和jquery.nivo.slider.js文件。

<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" />
<script src=js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.nivo.slider.js" type="text/Javascript"></script>                

HTML結構

該響應式幻燈片的HTML結構非常簡單，使用一個帶#slider的<div>作為容器，里面放置你需要的圖片即可。

<div id="slider" class="nivoSlider">
    <img src="images/slide1.jpg" alt="" />
    <a href="#"><img src="images/slide2.jpg" alt="" title="#htmlcaption" /></a>
    <img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
    <img src="images/slide4.jpg" alt="" />
</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>                

最好在包裹容器上添加class nivoSlider。上面的代碼中還展示了如何為圖標添加可以帶HTML標簽的標題效果（例如超鏈接）。它們的關聯關系是在圖片的title屬性指向作為圖片標簽的容器div#htmlcaption。

調用插件

在頁面DOM元素加載完畢之后，可以通過下面的方法來初始化該幻燈片插件。

<script type="text/javascript">
  $(window).load(function() {
      $('#slider').nivoSlider();
  });
</script>                

注意Nivo Slider幻燈片插件使用$(window).load()函數而不是$(document).ready()函數，這與其它jQuery插件的使用有所不同。

配置參數

下面是該響應式幻燈片的可用配置參數。

參數	默認值	描述
effect	'random'	幻燈片的過渡動畫效果，可以指定類似：'fold,fade,sliceDown'
slices	15	slice動畫過渡的配置
boxCols	8	box動畫過渡的配置
boxRows	4	box動畫過渡的配置
animSpeed	500	幻燈片過渡動畫的時間
pauseTime	3000	每一個幻燈片slide顯示的時間
startSlide	0	幻燈片開始的slide的序號
directionNav	true	是否顯示next/PRev導航
controlNav	true	是否顯示圓點導航
controlNavThumbs	false	使用圖片縮略圖來代替圓點導航按鈕
pauSEOnHover	true	在鼠標滑過幻燈片時是否暫停播放
manualAdvance	false	強制手動進行過渡動畫
prevText	'Prev'	prev導航按鈕上的文本
nextText	'Next'	next導航按鈕上的文本
randomStart	false	是否隨機開始播放
beforeChange	function(){}	一個slide開始過渡動畫之前觸發
afterChange	function(){}	一個slide結束過渡動畫之后觸發
slideshowEnd	function(){}	所有的幻燈片都被顯示之后觸發
lastSlide	function(){}	最后一個幻燈片slide顯示之后觸發
afterLoad	function(){}	幻燈片被加載之后觸發

effect可以設置為以下的動畫過渡效果：

sliceDown
sliceDownLeft
sliceUp
sliceUpLeft
sliceUpDown
sliceUpDownLeft
fold
fade
random
slideInRight
slideInLeft
boxRandom
boxRain
boxRainReverse
boxRainGrow
boxRainGrowReverse

小技巧

使用幻燈片主題

要使用Nivo Slider幻燈片插件提供的各種主題樣式，可以按下面操作。首先在頁面中引入主題CSS文件。

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

然后需要按下面的格式調整一些你的HTML標簽。

<div class="slider-wrapper theme-default">
    <div class="ribbon"></div>
    <div id="slider" class="nivoSlider">
        ...
    </div>
</div>              

注意，你可以在頁面中引入多個主題CSS樣式文件，但是它們不會被顯示，直到你在幻燈片包裹容器上設置theme-{theme name}后，該主題才會被啟用。

使用縮略圖導航

要使用縮略圖導航必須確保controlNavThumbs參數設置為true。該參數被啟用后，插件會檢查圖片的data-thumb屬性，使用該屬性中指定的圖片URL作為縮略圖。

<div id="slider">
    <img src="images/1.jpg" alt="" data-thumb="images/1_thumb.jpg" />
    <img src="images/2.jpg" alt="" data-thumb="images/2_thumb.jpg" />
    <img src="images/3.jpg" alt="" data-thumb="images/3_thumb.jpg" />
    <img src="images/4.jpg" alt="" data-thumb="images/4_thumb.jpg" />
</div>              