官方默認(rèn)的幻燈幻燈片展示樣式,也許你想換換樣子了。呵呵,下面我就給大家分享下如何自定義自己的diy幻燈模塊。 下面是默認(rèn)的展示樣式: 150619uqj8x88ssjjsstt8默認(rèn)的diy模塊代碼為:
<div class="module cl slidebox">
<ul class="slideshow">
[loop]
<li style="width: {picwidth}px; height: {picheight}px;"><a href="{threadurl}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a><span class="title">{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 class="title">{threadsubject}</span></li>

其中,<span class="title">{threadsubject}</span>是底部的半透明標(biāo)題文字。

如果說(shuō)你沒(méi)有定義圖片輪換展示的代碼的話,<script type="text/javascript">

runslideshow();

</script>

這段代碼會(huì)自動(dòng)生成一個(gè)圖片輪換展示的切換內(nèi)容,即當(dāng)前半透明的數(shù)字標(biāo)識(shí)列

但是有時(shí)候我們經(jīng)常需改變它的展示方式讓他變得更有色彩感,例如下面這種展示方式:
RGO
<style>
.slidebar em{padding:1px 5px;margin:0 1px;background:#eef1ee;}
.slidebar em.on{background:#fac730;}
</style>
<div class="module cl slidebox" style="position:relative;">
<ul class="slideshow">
[loop]
<li style="width: {picwidth}px; height: {picheight}px;"><a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a><span class="title">{title}</span></li>
[/loop]
</ul>
<div class="btns slidebar" style="position:absolute;bottom:5px;right:4px;">
    [loop1]
        <em>{currentorder}</em>
    [/loop1]
</div>
</div>
<script type="text/javascript">
runslideshow();
</script>
 

這里我主要自定義了一下sidebar,以sidebar定義calss類的標(biāo)簽,中放置的是我們定時(shí)轉(zhuǎn)換的內(nèi)容。你可以在這里放置標(biāo)題,縮略圖等等,讓它們定時(shí)切換,也可以放置當(dāng)前展示順序的數(shù)字代碼,我這里自定義的便是數(shù)字代碼:

<div class="btns slidebar"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;}

就可以達(dá)到到我想要的效果了。這里我只說(shuō)這種簡(jiǎn)單的應(yīng)用,其中還有幾種很多的展示樣式。官方的門戶頻道模板中提供了幾種。你可以單獨(dú)下載下來(lái)。放到本地看以看。然后通過(guò)對(duì)幻燈代碼的修改達(dá)到你想要的展示方式。我們只需要調(diào)整結(jié)構(gòu)和重新指定css樣式就可以了。