官方預設的幻燈幻燈片展示樣式，也許你想換換樣子了。呵呵，下面我就給大家分享下如何自定義自己的 diy 幻燈模組。
下面是預設的展示樣式：
預設的 diy 模組程式碼為：
<div >
<ul >
[loop]
<li style="width: {picwidth}px; height: {picheight}px;"><a
href="{threadurl}"{target}><img src="{pic}" width="{picwidth}"
height="{picheight}" /></a><span
>{threadsubject}</span></li>
[/loop]
</ul>
</div>
<script type="text/javascript">
runslideshow();
</script>
這段程式碼的具體含義是：
<li style="width: {picwidth}px;height:
{picheight}px;"><ahref="{threadurl}"{target}><img
src="{pic}"width="{picwidth}"
height="{picheight}"/></a><span
>{threadsubject}</span></li>
其中，<span >{threadsubject}</span> 是底部的半透明標題文字。
如果說你沒有定義圖片輪換展示的程式碼的話，<script type="text/javascript">
runslideshow();
</script>
這段程式碼會自動生成一個圖片輪換展示的切換內容，即當前半透明的數字標識列。
但是有時候我們經常需改變它的展示方式讓他變得更有色彩感，例如下面這種展示方式：
這是我修改後的模板程式碼：
<style>
.slidebar em{padding:1px 5px;margin:0 1px;background:#eef1ee;}
.slidebar em.on{background:#fac730;}
</style>
<div style="position:relative;">
<ul >
[loop]
<li style="width: {picwidth}px; height: {picheight}px;"><a
href="{url}"{target}><img src="{pic}" width="{picwidth}"
height="{picheight}" /></a><span
></span></li>
[/loop]
</ul>
<div style="position:absolute;bottom:5px;right:4px;">
[loop1]
<em>{currentorder}</em>
[/loop1]
</div>
</div>
<script type="text/javascript">
runslideshow();
</script>
這裡我主要自定義了一下 sidebar，以 sidebar 定義 calss 類的標籤，中放置的是我們定時轉換的內容。你可以在這裡放置標題，縮圖等等，讓它們定時切換，也可以放置當前展示順序的數字程式碼，我這裡自定義的便是數字程式碼：
<div style="position:absolute;bottom:5px;right:4px;">
[loop1]
<em>{currentorder}</em>
[/loop1]
</div>
重新給他附加了樣式：
.slidebar em{padding:1px 5px;margin:01px;background:#eef1ee;}
.slidebar em.on{background:#fac730;}
就可以達到到我想要的效果了。這裡我只說這種簡單的應用，其中還有幾種很多的展示樣式。官方的門戶頻道模板中提供了幾種。你可以單獨下載下來。放到本地看以看。然後透過對幻燈程式碼的修改達到你想要的展示方式。我們只需要調整結構和重新指定 css 樣式就可以了。