【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檔案是完整的官方原始檔,你看到的內容都是由裡面的程式碼複製整理出來,有興趣的話不妨下載回去研究一下,也許你會有更驚人的發現的啦~

這個網誌中的熱門文章

【Google Site】用html小工具做出marqueer效果