1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. 網頁設計
  6. »
  7. 網設套件-Nivo Slider動態炫麗的過場廣告輪播特效

網設套件-Nivo Slider動態炫麗的過場廣告輪播特效

2012/05/23

梅問題-網頁設計元件-NivoSlider動態廣告輪播

  最近看到好友「飛爾酥創意設計」的網站中,上方有個很酷的動態輪播廣告,其過場效果像極了Flash,本以為是Flash作的,按滑鼠右鍵才發現,原來是javascript作成的,於是就去請教好友男丁大大,這種有無現成的元件可套用,該不會真得要自已coding吧!哈~真不虧是jQuery一哥,馬上介紹了二款現成套件給梅干,經梅干實際使用後,Nivo Slider這套外掛套件,作的實在是太強大了,只要簡易的修改一下CSS,就可套用在自已的版面上囉!


NivoSlider

套件名稱:NivoSlider
套件性質:免費
套件語言:javascript
套件網址:http://nivo.dev7studios.com/

Step1
進入套件網站後,點右上的Free Download鈕。
梅問題-網頁設計元件-NivoSlider動態廣告輪播


Step2
接著點最左邊的Download鈕。
梅問題-網頁設計元件-NivoSlider動態廣告輪播


Step3
下載回去後,解壓縮到demo / demno.html,就可看範例網頁。
梅問題-網頁設計元件-NivoSlider動態廣告輪播


Step4
這就是官方的預設範例網頁。
梅問題-網頁設計元件-NivoSlider動態廣告輪播


Step5
接著來看看怎修改,而官方內建的佈景共有三個,分別為default、pascal、orman三種,這可在demo下的theme-作設定,若要新增廣告輪播的圖像時,可在nivoSlidr的div中新增。
梅問題-網頁設計元件-NivoSlider動態廣告輪播


Step6

若新增的廣告圖片大小與官方不同時,可從style.css中進行修改。

梅問題-網頁設計元件-NivoSlider動態廣告輪播


  由於官方的架構有點麻煩,因此梅干也花了點時間,將它整理在同一層,因此要引用時,只要把資料放在同一層就可以了,會方便許多,同時梅干也花了點時間,將官方三個佈景改成自已的圖片,各位可參考看看,真的是蠻方便的~


[梅問題整合版下載][梅問題-default佈景][梅問題-orman佈景][梅問題-pascal佈景]