Dynamic Image Gallery and Slideshow 實際執行畫面

Dynamic Image Gallery and Slideshow 非常輕量級的一個圖片畫廊和幻燈片程式，程式主體內容僅3KB還包含不少效果，有著優雅、簡單、檔案小需求的開發者這個套件功能絕對非常適合的您的網站。

使用方法：
首先在 header 的部分加入上圖範例中所需要用到的 Style 設計
* {margin:0; padding:0}
body {font:12px Verdana, Arial, Helvetica, sans-serif; background:#666 url(images/bg.gif)}
#gallery {position:relative; width:686px; margin:40px auto; padding:10px; border:6px solid #fff; background:#AAA}
#images {border:2px solid #9ac1c9; height:225px; background:#eef5f6; margin-bottom:20px}
#image {position:relative; width:672px; height:375px; padding:5px; border:2px solid #666; background:#FFF url(images/loading.gif) center center no-repeat}
#image img {position:absolute; top:5px; left:5px}
#thumbwrapper {margin-top:10px; padding:5px 0; width:682px; height:100px; border:2px solid #666; background:#FFF}
#thumbarea {position:relative; overflow:hidden; height:100px; width:682px; }
#thumbs {position:absolute; list-style:none; margin-left:5px; height:100px; width:10000px; border-right:5px solid #FFF}
#thumbs li {float:left; margin-right:5px; cursor:pointer}
.imgnav {position:absolute; height:375px; width:20%; z-index:100; height:375px; width:20%; z-index:100; outline:none; cursor:pointer}
#previmg {left:0; background:url(images/left.gif) left center no-repeat; border-left:5px solid #FFF}
#previmg:hover {opacity:1; filter:alpha(opacity=100)}
#nextimg {right:0; background:url(images/right.gif) right center no-repeat; border-right:5px solid #FFF}
#nextimg:hover {opacity:1; filter:alpha(opacity=100)}


接下在畫上 HTML 圖片展示的位置
<div id="gallery">
  <div id="imagearea">
    <div id="image">
      <a href="javascript:slideShow.nav(-1)" class="imgnav " id="previmg"></a>
      <a href="javascript:slideShow.nav(1)" class="imgnav " id="nextimg"></a>
    </div>
  </div>
  <div id="thumbwrapper">
    <div id="thumbarea">
      <ul id="thumbs">
        <li value="1"><img src="thumbs/1.jpg" width="179" height="100" alt="" /></li>
        <li value="2"><img src="thumbs/2.jpg" width="179" height="100" alt="" /></li>
        <li value="3"><img src="thumbs/3.jpg" width="179" height="100" alt="" /></li>
        <li value="4"><img src="thumbs/4.jpg" width="179" height="100" alt="" /></li>
        <li value="5"><img src="thumbs/5.jpg" width="179" height="100" alt="" /></li>
      </ul>
    </div>
  </div>
</div>


最後加上設定和加入主要的 JavaScript 檔案
<script type="text/javascript">
var imgid = 'image';        //圖片所使用的元素
var imgdir = 'fullsize';     // 大圖的資料夾
var imgext = '.jpg';        // 圖片的附檔名
var thumbid = 'thumbs'; //小圖的資料夾
var auto = true;             //是否自動撥放
var autodelay = 5;         //自動撥放的秒數
</script>
<script type="text/javascript" src="slide.js"></script>


如此一來就全部完成了

作者網站：http://www.scriptiny.com/2008/05/ajax-image-gallery-slideshow/
檔案大小：411 KB(包含範例及圖片)
檔案下載：http://www.scriptiny.com/wp-content/uploads/2008/05/slideshow.zip
檔案備份：下載