官方默認的幻燈幻燈片展示樣式，也許你想換換樣子了。呵呵，下面我就給大家分享下如何自定義自己的 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 樣式就可以了。