Well Develop (香港) 教學 整網站, 開網店, SEO優化, 推廣宣傳教學 
相關文章
如何添加 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
