主頁 / 電腦知識教學 / 如何添加 Nivo Slideshow 到您的網站?

如何添加 Nivo Slideshow 到您的網站?

如何添加 Nivo Slideshow 到您的網站? 我們使用 Web Page Maker 作為一個例子。

1. 解壓 nivoslider.zip 並上傳到 Web 服務器

2. 在 WPM 選擇菜單 “Insert” -> “HTML code …”, 鍵入以下:

<div id="slider3" style="width:960px;height:380px;">
 <img src="images/slideshow/slide-001.jpg" width="941" height="380" alt="" title="NextSpeak Mandarin TTS"/>
 <img src="images/slideshow/slide-002.jpg" width="941" height="380" alt="" title="NextOffice USB Edition"/>
 <img src="images/slideshow/slide-003.jpg" width="941" height="380" alt="" title="NextPDF + FormFiller"/>
 <img src="images/slideshow/slide-004.jpg" width="941" height="380" alt="" title="NextOffice 2010 Professional Edition"/>
 <img src="images/slideshow/slide-005.jpg" width="941" height="380" alt="" title="Newly launched Training Service"/>
 </div>
 <div id="htmlcaption">
 <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
 </div>
 <script type="text/javascript">
 jQuery(window).load(function() {
    jQuery("#slider3").nivoSlider({
       effect:"random",
       slices:5,
       boxCols:8,
       boxRows:4,
       animSpeed:500,
       pauseTime:3000,
       startSlide:0,
       directionNav:true,
       directionNavHide:true,
       controlNav:true,
       controlNavThumbs:false,
       controlNavThumbsFromRel:true,
       keyboardNav:true,
       pauseOnHover:true,
       manualAdvance:false
    });
 });
 </script>

3. In WPM, 選擇菜單”Format” -> “Page Properties” -> “Header”

<!--CSS FILES STARTS-->
 <link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen"/>
 <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
 <!--JS FILES STARTS-->
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
 <!-- JQUERY -->
 <script type="text/javascript" src="js/nivo-slider/jquery.nivo.slider.js"></script>

4. 上傳你的圖片取代 image/slideshow/ 中的幻燈片範例。
5. 如果你想一個不同的的幻燈片大小,修改 941×380。

Facebook Comments

關於 WaiTing LI

香港SEO專家。專家地位並非紙上談兵自說自話而來,應該是基於由同業又或者權威的獨立第三方給予的評價。而SEO專家地位大致可以從 Google 給予你所競逐一大籃子競爭性高的關鍵字排名結果推斷出來。其他我關於宣傳推廣的文章亦取得很高排名。這方面搜尋引擎似乎亦給予我專家效應。

也查看

電郵發送機制詳細解說 – 什麼是 smtp 服務器?為什麼需要流量控制?

郵發送機制 隨時代進步。傳統的 …

發表迴響

支持我們!

如果你喜歡這個網站,請點擊以下按鈕支持我們!