【DOC】-Discuz!論壇系統(tǒng)DIY模塊模板使用教程-圖文

Discuz!論壇系統(tǒng)DIY模塊模板使用教程_圖文

Discuz!論壇系統(tǒng)DIY模塊模板使用教程

今天為大家講解一下在使用DIY過程中的一些技巧與方法

仔細閱讀，受益匪淺

一、如何在模塊中增加“標題”及“更多”的鏈接如下圖樣式

方法：

通過框架或模塊都可以實現(xiàn)上述樣式，我們以框架為例，我們在DIY的時候選中要編輯的框架點擊編輯如下圖所示

之后點擊標題

在彈出的層中可以添加標題及鏈接,位置選擇居左如下圖所示同時可以設置標題的顏色及大小

接下來增加“更多”的鏈接點擊彈出層的添加新標題按扭如下圖所示，會“復制”出一份新的標題你只需修改就可以了

把其中的“精彩教程”改成“更多”，鏈接以及字體、顏色都進行修改就可以了，這里的位置一定要選擇“居右”

完成，這樣框架就有了標題及更多，模塊的方法同上

二、DIY的模塊中如何調整鏈接的顏色如下圖樣式

方法：

選中要修改的模塊，點擊編輯，選擇數(shù)據(jù)如下圖所示

在彈出層中選擇編輯如下圖所示

在彈出的層中可以對標題進行加粗、斜體、加下劃線、修改顏色等操作

完成

三、如何在現(xiàn)有的模塊中添加新的數(shù)據(jù)

選中要添加數(shù)據(jù)的模塊點擊編輯--數(shù)據(jù)如下圖所示

在彈出的層中選擇任意一條數(shù)據(jù)點擊編輯如下圖所示

點擊編輯后在彈出的層中選擇從數(shù)據(jù)源獲取此處可以添寫帖子ID、文章ID、日志ID、圖片ID來獲取數(shù)據(jù)如下圖所示

點擊獲取會填充模塊內相應的數(shù)據(jù)字段（此處的數(shù)據(jù)字段會根據(jù)模塊樣式的不同有所變化，請注意）

完成

四、DIY時如何調用外部程序的數(shù)據(jù)

當我們與第三方程序整合后如何在門戶、頻道、論壇、或可以DIY的區(qū)域調用這些第三方程序的數(shù)據(jù)

首先我們可以在需要調用的地方拖一個展示類中的靜態(tài)模塊如下圖所示

如上圖所示選擇數(shù)據(jù)來源為“自定義HTML”

一般第三方系統(tǒng)的數(shù)據(jù)調用都會有輸出JS格式的我們把第三方程序提供的JS代碼粘貼進HTML代碼框就可以了

如下圖所示

完成

五、首頁多格或首頁四格如何DIY出來

我們以論壇首頁為例（在任何頁面都可以）來制作一個首頁四格

首先在論壇首頁拖一個1:1的框架如下圖所示

接下來向已拖好的1-1框架的框架里左側的1里面拖入一個1:1的框架如下圖所示

接下來向右側的1里面也拖入一個1:1的框架如下圖所示

接下來我們就可以通過拖拽模塊到框架中去了

此時我們可以去掉框架的標題，同時為每一個模塊增加一個標題如下圖所示

你可以通過不同的模塊樣式或者CSS來美化這里

完成

六、如何修改整個模塊的鏈接樣式比如下圖

方法：

選中要編輯的模塊，點擊編輯--樣式進行修改如下圖所示

以上修改針對整個模塊

完成

七、如何修改兩個模塊或兩個框架之間的距離如下圖樣式

選擇要編輯的框架或者模塊，點擊編輯--樣式選擇外邊距，勾選分別設置，在右邊距中寫入合適的數(shù)字就可以了例如10

如下圖所示

完成后的效果如下圖樣式

全方位立體式講解DIY技巧集錦第二彈

一、DIY中TAB框架如果切換點擊方式（鼠標點擊與鼠標滑過）

如下圖中的效果如何實現(xiàn)

實現(xiàn)方法：

拖一個TAB框架到頁面中，點編輯，選擇標題如下圖所示

在彈出的窗口中選擇切換類型如下圖所示。

你可以根據(jù)你的需要選擇是點擊還是滑過

完成

二、在DIY模塊中的模塊數(shù)據(jù)中固定是什么意思，如下圖

解答：當勾選固定后此條數(shù)據(jù)將不會隨著模塊屬性當中的條件進行更新，也就是說，此條數(shù)據(jù)將永久不變，除非把勾選去掉

三、如何實現(xiàn)兩個模塊中間一條豎線的效果，如下圖效果

實現(xiàn)方法

選中要操作的DIY模塊選擇樣式如下圖所示

在彈出的層中，選擇邊框的分別設置，在邊框的“左”大小設置為1px，“樣式”選擇實線，“顏色”選擇灰色，如下圖所示

這樣設置后我們就能看到一個邊線了這時你會看到內容與邊線擠在了一起如下圖所示

接下來我們進行調整內邊距改變上圖中的樣式同理，打開樣式編輯層選擇“內邊距”點分別設置在“左”中添加

10px

調整后如下圖所示

大家可以根據(jù)實際情況調整內、外邊距的大小與邊框的設置，靈活使用

四、如何將一個文章模塊轉換為一個帖子模塊

比如官方提供的門戶及頻道都是文章類模塊，我們如何轉換為帖子類

編輯模塊的屬性把其中的模塊分類進行切換如下圖所示

選擇帖子模塊就可以變換這里要注意切換之后，原來的模塊樣式將變成私有的（自定義樣式）修改顯示樣式只能通過模塊模板進行修改

五、如何在模板（官方發(fā)布的頻道及門戶）里面插入DIY區(qū)域，如下圖所示

首先打開模板文件例如親子模板，打開template\default\portal\list_baby.htm文件

找到這兩段代碼的之間插入一行代碼1.<!--[diy=guanggao]--><divid="guanggao"

class="area"></div><!--[/diy]-->

復制代碼

其中“guanggao”可以任意取名，注意不可與本模板中其它重名，必須保證唯一性如下圖所示

2010-10-1117:53上傳

下載附件(7.55KB)

[功能介紹]教你如何把切割好的html頁面轉換成可供DIY的頁面（高級教程）

今天給大家講講如何把已經切割好的html頁面或者模仿的頁面轉換成可供DIY的頁面

請跟隨教程一步一步操作如有疑問請?zhí)岢?/p>

以下以家居頻道為例為大家講解

我們常見的切割好的html頁面包含這么幾個元素

如下圖

圖片文件夾、CSS文件夾、其它文件或圖片文件夾、一個html頁面

大家看下頁面效果

接下來，我們就把這個頁面轉換成DIY頁面

首頁我們用編輯工具打開index.html頁面

我們?yōu)榱四軌蚴褂媒y(tǒng)一的頭部樣式，這里面我們引入系統(tǒng)內置的頭部文件（header）把頁面中的關于頭部的信息刪除

如下圖所示

把系統(tǒng)頭部（header）引入進來

引用代碼

1.<!--{subtemplatecommon/header}-->復制代碼

如下圖所示

給新的模板起個名字

如下代碼

1.<!--[name]家居頻道模板[/name]-->復制代碼

如下圖所示

接下來增加可供DIY的CSS樣式表

如下代碼

1.<styleid="diy_style"type="text/css"></style>復制代碼

如下圖所示

頭部

接下來更換底部代碼

找到底部代碼刪除掉換成系統(tǒng)內置的通用底部代碼

如下圖所示

增加如下代碼

1.<!--{subtemplatecommon/footer}-->

復制代碼

如下圖所示

到此基本改造完成接下來我們把改造好的文件放在系統(tǒng)目錄中去

首先我們把index.html文件改名

把index.html改成list_home.htm此處一定要注意頻道模板必須以list_開頭，后綴名為.htm

把改好名的list_home.htm文件拷貝到template\default\portal目錄下

同時在template\default\portal目錄新建一個home文件夾用來放家居頻道的圖片及樣式表

此時復制原來的文件夾

到template\default\portal目錄的home文件夾如下圖所示

接下來用編輯器打開list_home.htm文件引入樣式表文件

代碼如下1.<link

href="$_G['setting']['csspath']template/default/portal/home/style/s

tyle.css"rel="stylesheet"type="text/css"/>

復制代碼

如下圖所示

同進查找<imgsrc="images/替換成<img

src="template/default/portal/home/images/

把其它用到的圖片標簽全替換成template/default/portal/home/這個目錄下就可以了

接下來我們進入后臺創(chuàng)建一個頻道模板名選擇“家居頻道模板”如下圖

創(chuàng)建完成后，點擊查看就能看到已與系統(tǒng)完全整合的模板了接下來我們把模板中的占位用的假數(shù)據(jù)換成DIY區(qū)域

用編輯器打開list_home.htm文件大家會看到有類似的如下代碼1.<divclass="list">

2.<ul>

3.<li><ahref="#"class="gray">[裝修資訊]</a>

<ahref="#">七步改造計為夏日客廳換新顏</a></li>

4.<li><ahref="#"class="gray">[行業(yè)資訊]</a>

<ahref="#">拆改承重墻如同醉駕需繳費</a></li>

5.<li><ahref="#"class="gray">[裝修資訊]</a>

<ahref="#">玩轉極簡主義構造冷色系居室空間</a></li>

6.<li><ahref="#"class="gray">[家居風水]</a>

<ahref="#">周星馳于文鳳分手防小三家居風水</a></li>

7.<li><ahref="#"class="gray">[裝修資訊]</a>

<ahref="#">小身材大味道邊角料再利用</a></li>

8.<li><ahref="#"class="gray">[裝修資訊]</a>

<ahref="#">茶幾布局隨性設計耐保養(yǎng)</a></li>

9.</ul>

10.</div>

復制代碼

把其中的1.<ul>2.<li><ahref="#"class="gray">[裝修資訊]</a><ahref="#">七步改造計為

夏日客廳換新顏</a></li>

3.<li><ahref="#"class="gray">[行業(yè)資訊]</a><ahref="#">拆改承重墻如

同醉駕需繳費</a></li>

4.<li><ahref="#"class="gray">[裝修資訊]</a><ahref="#">玩轉極簡主義

構造冷色系居室空間</a></li>

5.<li><ahref="#"class="gray">[家居風水]</a><ahref="#">周星馳于文鳳

分手防小三家居風水</a></li>

6.<li><ahref="#"class="gray">[裝修資訊]</a><ahref="#">小身材大味道

邊角料再利用</a></li>

7.<li><ahref="#"class="gray">[裝修資訊]</a><ahref="#">茶幾布局隨

性設計耐保養(yǎng)</a></li>

8.</ul>

復制代碼

換成

1.<!--[diy=diy1]--><divid="diy1"class="area"></div><!--[/diy]-->

復制代碼

完成后是這個樣子

1.<divclass="list">

2.<!--[diy=diy1]--><divid="diy1"

class="area"></div><!--[/diy]-->

3.</div>

復制代碼

其中的[diy=diy1]和divid="diy1"要匹配且在一個頁面中不能重復如果要在第二個區(qū)域里面使用的話就應該是

[diy=diy2]和divid="diy2"或者[diy=home]和divid="home"或

者[diy=discuz]和divid="discuz"只要在一個頁面內不重復隨你怎么寫都可以

如下圖所示

此時就完成了占位數(shù)據(jù)轉換成DIY區(qū)域的過程在上面的過程中這樣的替換并不是最優(yōu)化的，我們接下來進行改進，讓DIY更加靈活

此處的結構是這樣子的如下圖

實現(xiàn)它的代碼是這樣子的1.<divclass="focus_divfocustoday">

2.<h2><ahref="#">玩轉極簡主義構造冷色系居室空間

</a></h2>

3.<p>今夏最流行的設計當屬極簡主義，色彩也從華麗深沉轉

變?yōu)榱藘?yōu)雅素凈。玻璃、金屬、木質等較能體現(xiàn)簡單特性的材質..<a

href="#">[詳細]</a></p>

4.<divclass="list">

5.<ul>

6.<li><ahref="#"class="gray">[裝修資訊]</a>

<ahref="#">七步改造計為夏日客廳換新顏</a></li>

7.<li><ahref="#"class="gray">[行業(yè)資訊]</a>

<ahref="#">拆改承重墻如同醉駕需繳費</a></li>

8.<li><ahref="#"class="gray">[裝修資訊]</a>

<ahref="#">玩轉極簡主義構造冷色系居室空間</a></li>

9.<li><ahref="#"class="gray">[家居風水]</a>

<ahref="#">周星馳于文鳳分手防小三家居風水</a></li>

10.<li><ahref="#"class="gray">[裝修資訊]</a>

<ahref="#">小身材大味道邊角料再利用</a></li>

11.<li><ahref="#"class="gray">[裝修資訊]</a>

<ahref="#">茶幾布局隨性設計耐保養(yǎng)</a></li>

12.</ul>

13.</div>

14.</div>

復制代碼

我們可以把整個區(qū)域做為一個DIY區(qū)域

接下來我們進入后臺--》門戶--》模塊模板--》

點擊添加，這里我們以文章為例，選擇文章類進行提交

為模板起個名稱比如“首頁中間列表”

刪除代碼框里面的內容拷貝上面的代碼進來1.<divclass="focus_divfocustoday">

2.<h2><ahref="#">玩轉極簡主義構造冷色系居室空間

</a></h2>

3.<p>今夏最流行的設計當屬極簡主義，色彩也從華麗深沉轉

變?yōu)榱藘?yōu)雅素凈。玻璃、金屬、木質等較能體現(xiàn)簡單特性的材質..<a

href="#">[詳細]</a></p>

4.<divclass="list">

5.<ul>

6.<li><ahref="#"class="gray">[裝修資訊]</a>

<ahref="#">七步改造計為夏日客廳換新顏</a></li>

7.<li><ahref="#"class="gray">[行業(yè)資訊]</a>

<ahref="#">拆改承重墻如同醉駕需繳費</a></li>

8.<li><ahref="#"class="gray">[裝修資訊]</a>

<ahref="#">玩轉極簡主義構造冷色系居室空間</a></li>

9.<li><ahref="#"class="gray">[家居風水]</a>

<ahref="#">周星馳于文鳳分手防小三家居風水</a></li>

10.<li><ahref="#"class="gray">[裝修資訊]</a>

<ahref="#">小身材大味道邊角料再利用</a></li>

11.<li><ahref="#"class="gray">[裝修資訊]</a>

<ahref="#">茶幾布局隨性設計耐保養(yǎng)</a></li>

12.</ul>13.</div>

14.

</div>

復制代碼

如下圖所示

接下來把代碼框中的代碼進行轉換

把以下代碼1.<divclass="focus_divfocustoday">

2.<h2><ahref="#">玩轉極簡主義構造冷色系居室空間

</a></h2>

3.<p>今夏最流行的設計當屬極簡主義，色彩也從華麗深沉轉

變?yōu)榱藘?yōu)雅素凈。玻璃、金屬、木質等較能體現(xiàn)簡單特性的材質..<a

href="#">[詳細]</a></p>

4.<divclass="list">

5.<ul>

6.<li><ahref="#"class="gray">[裝修資訊]</a>

<ahref="#">七步改造計為夏日客廳換新顏</a></li>

7.<li><ahref="#"class="gray">[行業(yè)資訊]</a>

<ahref="#">拆改承重墻如同醉駕需繳費</a></li>

8.<li><ahref="#"class="gray">[裝修資訊]</a>

<ahref="#">玩轉極簡主義構造冷色系居室空間</a></li>

9.<li><ahref="#"class="gray">[家居風水]</a>

<ahref="#">周星馳于文鳳分手防小三家居風水</a></li>

10.<li><ahref="#"class="gray">[裝修資訊]</a>

<ahref="#">小身材大味道邊角料再利用</a></li>

11.<li><ahref="#"class="gray">[裝修資訊]</a>

<ahref="#">茶幾布局隨性設計耐保養(yǎng)</a></li>

12.</ul>

13.</div>

14.</div>

復制代碼

改造成如下代碼1.<divclass="focus_divfocustoday">2.

3.[index=1]

4.<h2><ahref="{url}"{target}>{title}</a></h2>

5.<p>{summary}<ahref="{url}"{target}>[詳細]</a></p>

6.[/index]

7.

8.<divclass="list">

9.<ul>10.[loop]11.<li><ahref="{caturl}"

{target}class="gray">[{catname}]</a><ahref="{url}"{target}>{title}</a></li>

12.[/loop]

13.</ul>

14.</div>

15.</div>

復制代碼

其中{title}表示標題，{url}表示鏈接，{target}表示鏈接打開的方式，{summary}表示文章的簡介。其它內容請參考說明

其中[index=1]...[/index]表示第一條數(shù)據(jù)

1.

2.

3.

4.[index=1]<h2><ahref="{url}"{target}>{title}</a></h2><p>{summary}<ahref="{url}"{target}>[詳細]</a></p>[/index]

復制代碼

其中[loop]...[/loop]表示循環(huán)

1.[loop]

2.<li><ahref="{caturl}"{target}class="gray">[{catname}]</a><ahref="{url}"{target}>{title}</a></li>

3.[/loop]

復制代碼

現(xiàn)在模塊模板就制作完成了

接下來我們在頻道的前臺進行調用

在頻道的前臺頁面點DIY會看到中間部分沒有內容會多出一個淺色的條便是DIY

區(qū)域如下圖

我們在DIY區(qū)域里面拖入一個100%的框架

把標題去掉如下圖

接下來選擇樣式把邊框設為0PX，外邊距也設為0PX如下圖

完成后在此框架內拖入一個文章模塊并選擇剛才創(chuàng)建的模塊樣式，如下圖

完成后選擇樣式把邊框、外邊距、內邊距都設為0PX如下圖

2010-9-2615:09上傳

下載附件(11.22KB)

到此模板的制作就完成了，其它內容可仿造以上設置進行制作

[功能介紹]百變幻燈片，完全DIY（高級教程）

在DIY時如何調用幻燈片，幻燈片該如何制作，這一講我們來教大家如何制作幻燈片

請跟隨教程從頭到尾仔細閱讀，你將收獲不小

第一步制作幻燈片：后臺--》門戶--》模塊模板

點擊添加按扭如下圖所示

此處可以可以選擇不同的模塊分類如附件類、帖子類、文章類、圖片類等等可以根據(jù)你的喜好選擇不同的模塊分類

下面我們以文章類為例來講解，選擇文章分類點提交如下圖所示，為新建的模塊起個名字如“百變幻燈片”

把代碼框里面的內容全部刪除

接下來我們輸入代碼

首先在代碼框里面輸入

1.<divclass="slidebox"></div>

復制代碼

其中的div可以是任意標簽，如table，span等，我們這里以div為例

此處的標簽必須加一個class="slidebox"的屬性如下面代碼所示，只有包含在有class="slidebox"屬性的標簽里面的內容才是幻燈片，切記

如下圖所示

接下來，我們增加幻燈代碼下面代碼用來實現(xiàn)圖片（或內容）的顯示作用屬性必須為class="slideshow"的標簽

1.<divclass="slideshow"></div>

復制代碼

上面的代碼必須放在class="slidebox"的屬性的標簽里面上面已經講過，完整代碼如下1.

2.

3.

4.<divclass="slidebox"><divclass="slideshow"></div>

5.</div>

復制代碼

接下來我們來增加“滑動”、“點擊”的代碼

1.<divclass="slidebar"></div>

復制代碼

上面的代碼必須放在class="slidebox"的屬性的標簽里面上面已經講過，完整代碼如下1.

2.

3.

4.

5.

6.7.<divclass="slidebox"><!--幻燈片開始--><divclass="slideshow"></div><!--圖片展示--><divclass="slidebar"></div><!--幻燈片控制展示--></div><!--幻燈片結束-->

復制代碼

以上代碼已完成幻燈片的框架接下來我們?yōu)榛脽羝砑訑?shù)據(jù)代碼

在<divclass="slideshow"></div>代碼中間插入圖片顯示代碼

如下代碼

1.<divclass="slideshow"><imgsrc="{pic}"width="{picwidth}"

height="{picheight}"/></div><!--圖片展示-->

復制代碼

其中{pic}為圖片地址變量，{picwidth}為圖片寬度變量，{picheight}為圖片高度變量

接下來為圖片增加循環(huán)代碼如下代碼

1.[loop]

2.<imgsrc="{pic}"width="{picwidth}"height="{picheight}"/>

3.[/loop]

復制代碼

完整代碼如下

1.<divclass="slidebox"><!--幻燈片開始-->

2.<divclass="slideshow">

3.[loop]

4.

5.6.

7.

8.

9.<imgsrc="{pic}"width="{picwidth}"height="{picheight}"/>[/loop]</div><!--圖片展示--><divclass="slidebar"></div><!--幻燈片控制展示--></div><!--幻燈片結束-->

復制代碼接下來為滑動條增加數(shù)字

在<divclass="slidebar"></div>中增加婁字變量如下代碼

1.<divclass="slidebar">

2.[loop1]<span>{currentorder}</span>[/loop1]

3.</div>

復制代碼

其中{currentorder}是當前顯示的順序數(shù)字,其中[loop1]...[/loop1]為循環(huán)，你可能注意到了，這里用了[loop1],如果一個模塊中需要多次循環(huán)時就可以使用loop1、loop2、loop3以此類推來實現(xiàn)多處循環(huán)的目的

最后增加腳本代碼如下以下代碼放在模塊代碼的最后

1.<scripttype="text/javascript">

2.runslideshow();

3.</script>

復制代碼

此時一個簡單的幻燈片就完成了，幻燈片的完整代碼如下1.<divclass="slidebox"><!--幻燈片開始-->

2.<divclass="slideshow">

3.[loop]

4.<imgsrc="{pic}"width="{picwidth}"height="{picheight}"/>

5.[/loop]

6.</div>

7.<!--圖片展示-->

8.<divclass="slidebar">

9.[loop1]<span>{currentorder}</span>[/loop1]

10.</div><!--幻燈片控制展示-->

11.</div><!--幻燈片結束-->

12.

13.<scripttype="text/javascript">

14.runslideshow();

15.</script>

復制代碼

如下圖所示

此時我們就可以通過前臺DIY調用了

如下圖所示調用

顯示效果

至此簡易幻燈片就完成了，需要你通過CSS樣式來配合美化一下

下面講解一些高級參數(shù)

1、滑動條如何控制讓用戶點擊還是滑動

在<divclass="slidebar">中加入?yún)?shù)（鼠標滑動）mevent="mouseover"或（鼠標點擊）mevent="click"完整代碼如下以下代碼實現(xiàn)點擊后變換1.<divclass="slidebar"mevent="click">2.[loop1]<span>{currentorder}</span>[/loop1]

3.</div>

復制代碼

2、如何實現(xiàn)上一個下一個的效果如下圖樣式

添加如下代碼即可實現(xiàn)1.

2.

3.

4.

5.

6.

7.<divclass="slidebarup"><span>up</span></div><divclass="slidebardown"><span>down</span></div>

復制代碼

標簽為class="slidebarup"的為上一個標簽為class="slidebardown"的為下一個

3、當slideshow的內容展示不全或不在一個區(qū)域時我們提供了更多內容的展示方法在需要展示的地方增加如下代碼

1.<divclass="slideother">

2.<span>可以是任何內容</span>

3.</div>

復制代碼

同時支持多個slideother如下代碼1.

2.

3.

4.

5.

6.

7.<divclass="slideother"><span>內容一</span></div><divclass="slideother"><span>內容二</span></div>

復制代碼

4、如何控制幻燈片播放的速度

在<divclass="slidebox">增加參數(shù)如下代碼其中timestep="3000"為毫秒

1.<divclass="slidebox"timestep="3000">

復制代碼

5、如何實現(xiàn)一次顯示多個圖片，每次切換多個如下圖樣式

在<divclass="slidebox">增加參數(shù)如下代碼

1.<divclass="slidebox"slidenum="3"slidestep="1">

復制代碼

其中slidenum="3"表示顯示數(shù)量，slidestep="1"表示每點擊一次左右按扭移動的次數(shù)

以上為幻燈片的所有功能

下面提供演示站點中門戶及頻道所用到的幻燈片代碼（大家可以參照所提供的代碼制作出炫麗的幻燈片）

以下所示效果都需要CSS配合

效果一

實現(xiàn)代碼1.

2.

3.

4.<divclass="slidebox"><divclass="slideshow">[loop]<ahref="{url}"{target}><imgsrc="{pic}"

width="{picwidth}"height="{picheight}"/></a>

5.[/loop]

6.</div>

7.<divclass="bignews_btns">

8.<divclass="btnsslidebar">

9.[loop1]

10.<em></em>

11.[/loop1]

12.</div>

13.<divclass="descslideother">

14.[loop2]

15.<ahref="{url}"{target}>{title}</a>

16.[/loop2]

17.</div>

18.</div>

19.</div>

20.<scripttype="text/javascript">

21.runslideshow();

22.</script>

復制代碼

效果二

實現(xiàn)代碼1.

2.

3.

4.

5.<divclass="slidebox"timestep="3000"><divclass="thumbonslideshow">[loop]<span><ahref="{url}"{target}><imgsrc="{pic}"

width="{picwidth}"height="{picheight}"/></a>

6.<p><ahref="{url}"{target}>查看</a></p>

7.</span>

8.[/loop]

9.</div>

10.<divclass="product_desc">

11.<divclass="onslideother">

12.[loop1]

13.<span>

14.<h2class="title"><a

href="{url}"{target}>{title}</a></h2>

15.<p>{summary}</p>

16.</span>

17.[/loop1]

18.</div>

19.<divclass="product_priceonslideother">

20.[loop2]

21.<span>{dateline}</span>

22.[/loop2]

23.</div>

24.<divclass="btnsslidebar">

25.[loop3]<em>{currentorder}</em>[/loop3]

26.</div>

27.</div>

28.</div>

29.<scripttype="text/javascript">30.runslideshow();

31.

</script>

復制代碼

效果三

實現(xiàn)代碼1.<divclass="slidebox"slidenum="3"slidestep="1">

2.<divclass="leftbtnslidebarup"><ahref="javascript:void(0);"

mevent="click"><img

src="template/default/portal/index/images/commend_bg_2_leftbtn.gif"/></a></div>

3.<divclass="middlecl">

4.<ulclass="slideshow">

5.[loop]<li><ahref="{url}"{target}><imgsrc="{avatar_big}"

width="{picwidth}"height="{picheight}"/></a><p><a

href="{url}"{target}>{title}</a></p></li>[/loop]

6.</ul>

7.</div>

8.<divclass="rightbtnslidebardown"><a

href="javascript:void(0);"mevent="click"><img

src="template/default/portal/index/images/commend_bg_2_rightbtn.gif"/></a></div>

9.</div>

10.<scripttype="text/javascript">

11.runslideshow();

12.</script>

13.

復制代碼

效果四

實現(xiàn)代碼1.<divclass="photoboxclslidebox"timestep="3000">

2.<divclass="zleftbtn">

3.<span>美食大賞</span>

4.<divclass="slidebar">

5.[loop]

6.<em></em>

7.[/loop]

8.</div>

9.</div>

10.<divclass="yrightpic">

11.<divclass="slideshow">

12.[loop1]

13.<div>

14.<ahref="{url}"{target}><imgsrc="{pic}"

width="{picwidth}"height="{picheight}"/></a>

15.<p><ahref="{url}"{target}>{title}</a></p>

16.</div>

17.[/loop1]

18.</div>

19.</div>

20.</div>

21.<scripttype="text/javascript">

22.runslideshow();

23.</script>

復制代碼

效果五

實現(xiàn)代碼..

9.<divclass="zslidebox"><divclass="boxslideshow">[loop]<div><ahref="{url}"{target}><imgsrc="{pic}"width="{picwidth}"height="{picheight}"/></a></div>[/loop]</div><divclass="box_btnclslidebar">

10.[loop1]11.<div>

12.

<span>{title}</span>

13.</div>

14.[/loop1]

15.</div>

16.<divclass="box_descslideother">

17.[loop2]

18.<p>

19.<ahref="{url}"{target}>{summary}</a></p>

20.[/loop2]

21.</div>

22.</div>

23.<scripttype="text/javascript">

24.runslideshow();

25.</script>

復制代碼

效果六

實現(xiàn)代碼1.<divclass="bignewsslidebox">2.<divclass="slideshow">[loop]<ahref="{url}"{target}><img

src="{pic}"

width="{picwidth}"height="{picheight}"/></a>[/loop]</div>

3.<divclass="btnsslidebar">

4.[loop1]

5.<em>{currentorder}</em>

6.[/loop1]

7.</div>

8.</div>

9.<scripttype="text/javascript">

10.runslideshow();

11.</script>

復制代碼

效果七

實現(xiàn)代碼

1.<divclass="slidebox">

2.<divclass="slideshow">[loop]<ahref="{url}"{target}><img

src="{pic}"width="{picwidth}"

height="{picheight}"/></a>[/loop]</div>

3.<ddclass="slidebar">

4.[loop1]

5.<em><ahref="#"><imgsrc="template/default/portal/food/images/num/0{currentorder}.gif"/></a></em>

6.[/loop1]

7.</dd>

8.<divclass="slideother">

9.[loop2]

10.<div><divclass="title">

11.<ahref="{url}"{target}>{title}</a>

12.</div>

13.<p>

14.{summary}

15.</p></div>

16.[/loop2]

17.</div>

18.</div>

19.<scripttype="text/javascript">

20.runslideshow();

21.</script>

復制代碼

效果八

實現(xiàn)代碼1.<divclass="bignewsslidebox">

2.<divclass="picboxslideshow">

3.[loop]<div><imgsrc="{pic}"

width="{picwidth}"height="{picheight}"/></div>[/loop]

4.</div>

5.<divclass="bignews_btnslidebar"

mevent="mouseover">

6.[loop1]

7.<div>

8.<p>

9.<strong><a

href="{url}"{target}>{title}</a></strong>

10.<em>{summary}</em>

11.</p>

12.<imgsrc="{pic