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

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

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

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

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

<div id="jslidernews1" style="width:100%;">
    <div></div>
             <!-- MAIN CONTENT -->
              <div style="width:941px; height:380px;">
                <ul>
                    <li>
                            <img src="images/slide-01.jpg" title="Newsflash 1" >           
                          <div>
                            <div><a target="_parent" title="Newsflash 1" href="#Category-1">/ NextSpeak Mandarin TTS /</a><i> - Feb. 15, 2012</i></div>
                            <h4>Product Description</h4>
                            <p>The one thing about a Web site, it always changes! ...
                            <a href="#">Read more </a>
                            </p>
                         </div>
                    </li>
                   <li>
                      <img src="images/slide-02.jpg" title="Newsflash 2" >           
                         <div>
                           <div><a target="_parent" title="Newsflash 2" href="#Category-2">/ NextOffice USB Edition /</a><i> - Feb. 15, 2012</i></div>
                            <h4>Product Description</h4>
                            <p>It easy to launch a Web site of any kind. Whether you want a brochure site ...
                            <a href="#">Read more </a>
                            </p>
                         </div>
                    </li>
                   <li>
                      <img src="images/slide-03.jpg" title="Newsflash 3" >            
                        <div>
                          <div><a target="_parent" title="Newsflash 3" href="#Category-3">/ NextPDF + FormFiller /</a><i> - Feb. 15, 2012</i></div>
                            <h4>Product Description</h4>
                            <p>With a library of thousands of free Extensions, you can add what you need as ...
                            <a href="#">Read more </a>
                            </p>
                         </div>
                    </li>
                    <li>
                      <img src="images/slide-04.jpg" title="Newsflash 5" >            
                        <div>
                          <div><a target="_parent" title="Newsflash 4" href="#Category-4">/ NextOffice 2010 Professional Edition /</a><i> - Feb. 15, 2012</i></div>
                            <h4>Product Description</h4>
                            <p>'Experience the Freedom'! It has never been easier to create your own Web...
                            <a href="#">Read more </a>
                            </p>
                         </div>
                    </li>
                    <li>
                      <img src="images/slide-05.jpg" title="Newsflash 5" >            
                        <div>
                           <div><a target="_parent" title="Newsflash 5" href="#">/ Newly launched Training Service /</a><i> - Feb. 15, 2012</i></div>
                           <h4>Product Description</h4>
                            <p>'Experience the Freedom'! It has never been easier to create your own Web...
                            <a href="#">Read more </a>
                            </p>
                         </div>
                    </li>
                  </ul>      
                </div>
        <!-- END MAIN CONTENT -->
           <!-- NAVIGATOR -->
               <div>
                  <div>Next</div>
                  <div>
                        <ul>
                           <li><img src="images/thumbs/thumbl_980x340.png" /></li>
                           <li><img src="images/thumbs/thumbl_980x340_002.png" /></li>
                           <li><img src="images/thumbs/thumbl_980x340_003.png" /></li>
                           <li><img src="images/thumbs/thumbl_980x340_004.png" /></li>    
                           <li><img src="images/thumbs/thumbl_980x340_005.png" /></li>             
                        </ul>
                  </div>
                  <div >Previous</div>
                </div>
          <!----------------- END OF NAVIGATOR --------------------->
          <!-- BUTTON PLAY-STOP -->
               <div></div>
           <!-- END OF BUTTON PLAY-STOP -->

</div>

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

<link rel="stylesheet" type="text/css" href="css/layout.css" />
<link rel="stylesheet" type="text/css" href="css/style1.css" />
<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.easing.js"></script>
<script language="javascript" type="text/javascript" src="js/script.js"></script>
<script type="text/javascript">
 $(document).ready( function(){    
        // buttons for next and previous item                        
        var buttons = { previous:$('#jslidernews1 .button-previous') ,
                        next:$('#jslidernews1 .button-next') };            
         $('#jslidernews1').lofJSidernews( { interval : 4000,
                                            direction        : 'opacitys',    
                                            easing            : 'easeInOutExpo',
                                            duration        : 1200,
                                            auto             : true,
                                            maxItemDisplay  : 4,
                                            navPosition     : 'horizontal', // horizontal
                                            navigatorHeight : 32,
                                            navigatorWidth  : 80,
                                            mainWidth        : 941,
                                            buttons            : buttons } );    
    });
</script>

4. 上傳你的圖片取代 images/, images/thumbnail 中的幻燈片範例。

Facebook Comments

關於 WaiTing LI

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

也查看

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

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

發表迴響

支持我們!

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