【Google Site】jwslider完整試用

又一名新朋友加入Googlesite-htmlBox俱樂部，這次是簡單的圖片淡入淡出功能和輪播，不花俏但是很實在，不同於googlesite所提供的content-slider版本(  Demo1  Demo2  )，jwslider不需要使用者手動的動態效果更能吸引瀏覽者的目光。
所謂的jwslider的程式包含了兩個部分，Demo上面的版本是圖片的淡入淡出，
這部分的html程式是

 <ul>  
      <li> <img src="1.jpg" alt="image" /> </li>  
      <li> <img src="2.jpg" alt="image" /> </li>  
      <li> <img src="3.jpg" alt="image" /> </li>  
      <li> <img src="4.jpg" alt="image" /> </li>  
 </ul>   

和他相對應的css style在下面

      <style type="text/css" media="screen">  
      ul {  
           width: 600px;  
           height: 450px;  
           overflow: auto;  
           margin: 0; padding: 0;  
      }  
      </style>  

淺顯易懂的寬高都在style裡面，稍微修正一下就可以符合需求。

Demo下面的版本是圖片的輪播。就視覺上還是比較具有動態效果。但是這部分的<div>則是寫在css style的id來控制他的內容。

 <div id="container">  
      <div>Represents content for div 1</div>  
      <div>Represents content for div 2</div>  
      <div>Represents content for div 3</div>  
      <div>Represents content for div 4</div>  
 </div>  

相對應的css style內容就是...

      <style type="text/css" media="screen">  
      #container {  
           margin: 50px 0;  
      }  
      #container div {  
           width: 600px;  
           height: 450px;  
           line-height: 450px;  
           text-align: center;  
           color: white;  
           background: black;  
      }  
      </style>  

同樣的，修改內容大小也同樣的非常的容易的說，這個就不再賣弄啦。

最重要的Script部分，礙於篇幅太長決定省略(被打)，有興趣的可以直接在Demo頁面下的附件找到檔案啦，只要直接下載你就可以看到Script部分的全貌，另外Demo頁下面的zip檔案是完整的官方原始檔，你看到的內容都是由裡面的程式碼複製整理出來，有興趣的話不妨下載回去研究一下，也許你會有更驚人的發現的啦~