【DOC】-Discuz!论坛系统DIY模块模板使用教程-图文

Discuz!论坛系统DIY模块模板使用教程_图文

Discuz!论坛系统DIY模块模板使用教程

今天为大家讲解一下在使用DIY过程中的一些技巧与方法

仔细阅读，受益匪浅

一、如何在模块中增加“标题”及“更多”的链接如下图样式

方法：

通过框架或模块都可以实现上述样式，我们以框架为例，我们在DIY的时候选中要编辑的框架点击编辑如下图所示

之后点击标题

在弹出的层中可以添加标题及链接,位置选择居左如下图所示同时可以设置标题的颜色及大小

接下来增加“更多”的链接点击弹出层的添加新标题按扭如下图所示，会“复制”出一份新的标题你只需修改就可以了

把其中的“精彩教程”改成“更多”，链接以及字体、颜色都进行修改就可以了，这里的位置一定要选择“居右”

完成，这样框架就有了标题及更多，模块的方法同上

二、DIY的模块中如何调整链接的颜色如下图样式

方法：

选中要修改的模块，点击编辑，选择数据如下图所示

在弹出层中选择编辑如下图所示

在弹出的层中可以对标题进行加粗、斜体、加下划线、修改颜色等操作

完成

三、如何在现有的模块中添加新的数据

选中要添加数据的模块点击编辑--数据如下图所示

在弹出的层中选择任意一条数据点击编辑如下图所示

点击编辑后在弹出的层中选择从数据源获取此处可以添写帖子ID、文章ID、日志ID、图片ID来获取数据如下图所示

点击获取会填充模块内相应的数据字段（此处的数据字段会根据模块样式的不同有所变化，请注意）

完成

四、DIY时如何调用外部程序的数据

当我们与第三方程序整合后如何在门户、频道、论坛、或可以DIY的区域调用这些第三方程序的数据

首先我们可以在需要调用的地方拖一个展示类中的静态模块如下图所示

如上图所示选择数据来源为“自定义HTML”

一般第三方系统的数据调用都会有输出JS格式的我们把第三方程序提供的JS代码粘贴进HTML代码框就可以了

如下图所示

完成

五、首页多格或首页四格如何DIY出来

我们以论坛首页为例（在任何页面都可以）来制作一个首页四格

首先在论坛首页拖一个1:1的框架如下图所示

接下来向已拖好的1-1框架的框架里左侧的1里面拖入一个1:1的框架如下图所示

接下来向右侧的1里面也拖入一个1:1的框架如下图所示

接下来我们就可以通过拖拽模块到框架中去了

此时我们可以去掉框架的标题，同时为每一个模块增加一个标题如下图所示

你可以通过不同的模块样式或者CSS来美化这里

完成

六、如何修改整个模块的链接样式比如下图

方法：

选中要编辑的模块，点击编辑--样式进行修改如下图所示

以上修改针对整个模块

完成

七、如何修改两个模块或两个框架之间的距离如下图样式

选择要编辑的框架或者模块，点击编辑--样式选择外边距，勾选分别设置，在右边距中写入合适的数字就可以了例如10

如下图所示

完成后的效果如下图样式

全方位立体式讲解DIY技巧集锦第二弹

一、DIY中TAB框架如果切换点击方式（鼠标点击与鼠标滑过）

如下图中的效果如何实现

实现方法：

拖一个TAB框架到页面中，点编辑，选择标题如下图所示

在弹出的窗口中选择切换类型如下图所示。

你可以根据你的需要选择是点击还是滑过

完成

二、在DIY模块中的模块数据中固定是什么意思，如下图

解答：当勾选固定后此条数据将不会随着模块属性当中的条件进行更新，也就是说，此条数据将永久不变，除非把勾选去掉

三、如何实现两个模块中间一条竖线的效果，如下图效果

实现方法

选中要操作的DIY模块选择样式如下图所示

在弹出的层中，选择边框的分别设置，在边框的“左”大小设置为1px，“样式”选择实线，“颜色”选择灰色，如下图所示

这样设置后我们就能看到一个边线了这时你会看到内容与边线挤在了一起如下图所示

接下来我们进行调整内边距改变上图中的样式同理，打开样式编辑层选择“内边距”点分别设置在“左”中添加

10px

调整后如下图所示

大家可以根据实际情况调整内、外边距的大小与边框的设置，灵活使用

四、如何将一个文章模块转换为一个帖子模块

比如官方提供的门户及频道都是文章类模块，我们如何转换为帖子类

编辑模块的属性把其中的模块分类进行切换如下图所示

选择帖子模块就可以变换这里要注意切换之后，原来的模块样式将变成私有的（自定义样式）修改显示样式只能通过模块模板进行修改

五、如何在模板（官方发布的频道及门户）里面插入DIY区域，如下图所示

首先打开模板文件例如亲子模板，打开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的页面

请跟随教程一步一步操作如有疑问请提出

以下以家居频道为例为大家讲解

我们常见的切割好的html页面包含这么几个元素

如下图

图片文件夹、CSS文件夹、其它文件或图片文件夹、一个html页面

大家看下页面效果

接下来，我们就把这个页面转换成DIY页面

首页我们用编辑工具打开index.html页面

我们为了能够使用统一的头部样式，这里面我们引入系统内置的头部文件（header）把页面中的关于头部的信息删除

如下图所示

把系统头部（header）引入进来

引用代码

1.<!--{subtemplatecommon/header}-->复制代码

如下图所示

给新的模板起个名字

如下代码

1.<!--[name]家居频道模板[/name]-->复制代码

如下图所示

接下来增加可供DIY的CSS样式表

如下代码

1.<styleid="diy_style"type="text/css"></style>复制代码

如下图所示

头部

接下来更换底部代码

找到底部代码删除掉换成系统内置的通用底部代码

如下图所示

增加如下代码

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

复制代码

如下图所示

到此基本改造完成接下来我们把改造好的文件放在系统目录中去

首先我们把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/这个目录下就可以了

接下来我们进入后台创建一个频道模板名选择“家居频道模板”如下图

创建完成后，点击查看就能看到已与系统完全整合的模板了接下来我们把模板中的占位用的假数据换成DIY区域

用编辑器打开list_home.htm文件大家会看到有类似的如下代码1.<divclass="list">

2.<ul>

3.<li><ahref="#"class="gray">[装修资讯]</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="#">小身材大味道边角料再利用</a></li>

8.<li><ahref="#"class="gray">[装修资讯]</a>

<ahref="#">茶几布局随性设计耐保养</a></li>

9.</ul>

10.</div>

复制代码

把其中的1.<ul>2.<li><ahref="#"class="gray">[装修资讯]</a><ahref="#">七步改造计为

夏日客厅换新颜</a></li>

3.<li><ahref="#"class="gray">[行业资讯]</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="#">茶几布局随

性设计耐保养</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"要匹配且在一个页面中不能重复如果要在第二个区域里面使用的话就应该是

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

者[diy=discuz]和divid="discuz"只要在一个页面内不重复随你怎么写都可以

如下图所示

此时就完成了占位数据转换成DIY区域的过程在上面的过程中这样的替换并不是最优化的，我们接下来进行改进，让DIY更加灵活

此处的结构是这样子的如下图

实现它的代码是这样子的1.<divclass="focus_divfocustoday">

2.<h2><ahref="#">玩转极简主义构造冷色系居室空间

</a></h2>

3.<p>今夏最流行的设计当属极简主义，色彩也从华丽深沉转

变为了优雅素净。玻璃、金属、木质等较能体现简单特性的材质..<a

href="#">[详细]</a></p>

4.<divclass="list">

5.<ul>

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="#">玩转极简主义构造冷色系居室空间</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="#">茶几布局随性设计耐保养</a></li>

12.</ul>

13.</div>

14.</div>

复制代码

我们可以把整个区域做为一个DIY区域

接下来我们进入后台--》门户--》模块模板--》

点击添加，这里我们以文章为例，选择文章类进行提交

为模板起个名称比如“首页中间列表”

删除代码框里面的内容拷贝上面的代码进来1.<divclass="focus_divfocustoday">

2.<h2><ahref="#">玩转极简主义构造冷色系居室空间

</a></h2>

3.<p>今夏最流行的设计当属极简主义，色彩也从华丽深沉转

变为了优雅素净。玻璃、金属、木质等较能体现简单特性的材质..<a

href="#">[详细]</a></p>

4.<divclass="list">

5.<ul>

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="#">玩转极简主义构造冷色系居室空间</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="#">茶几布局随性设计耐保养</a></li>

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

14.

</div>

复制代码

如下图所示

接下来把代码框中的代码进行转换

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

2.<h2><ahref="#">玩转极简主义构造冷色系居室空间

</a></h2>

3.<p>今夏最流行的设计当属极简主义，色彩也从华丽深沉转

变为了优雅素净。玻璃、金属、木质等较能体现简单特性的材质..<a

href="#">[详细]</a></p>

4.<divclass="list">

5.<ul>

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="#">玩转极简主义构造冷色系居室空间</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="#">茶几布局随性设计耐保养</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]表示第一条数据

1.

2.

3.

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

复制代码

其中[loop]...[/loop]表示循环

1.[loop]

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

3.[/loop]

复制代码

现在模块模板就制作完成了

接下来我们在频道的前台进行调用

在频道的前台页面点DIY会看到中间部分没有内容会多出一个浅色的条便是DIY

区域如下图

我们在DIY区域里面拖入一个100%的框架

把标题去掉如下图

接下来选择样式把边框设为0PX，外边距也设为0PX如下图

完成后在此框架内拖入一个文章模块并选择刚才创建的模块样式，如下图

完成后选择样式把边框、外边距、内边距都设为0PX如下图

2010-9-2615:09上传

下载附件(11.22KB)

到此模板的制作就完成了，其它内容可仿造以上设置进行制作

[功能介绍]百变幻灯片，完全DIY（高级教程）

在DIY时如何调用幻灯片，幻灯片该如何制作，这一讲我们来教大家如何制作幻灯片

请跟随教程从头到尾仔细阅读，你将收获不小

第一步制作幻灯片：后台--》门户--》模块模板

点击添加按扭如下图所示

此处可以可以选择不同的模块分类如附件类、帖子类、文章类、图片类等等可以根据你的喜好选择不同的模块分类

下面我们以文章类为例来讲解，选择文章分类点提交如下图所示，为新建的模块起个名字如“百变幻灯片”

把代码框里面的内容全部删除

接下来我们输入代码

首先在代码框里面输入

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

复制代码

其中的div可以是任意标签，如table，span等，我们这里以div为例

此处的标签必须加一个class="slidebox"的属性如下面代码所示，只有包含在有class="slidebox"属性的标签里面的内容才是幻灯片，切记

如下图所示

接下来，我们增加幻灯代码下面代码用来实现图片（或内容）的显示作用属性必须为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><!--幻灯片结束-->

复制代码

以上代码已完成幻灯片的框架接下来我们为幻灯片添加数据代码

在<divclass="slideshow"></div>代码中间插入图片显示代码

如下代码

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

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

复制代码

其中{pic}为图片地址变量，{picwidth}为图片宽度变量，{picheight}为图片高度变量

接下来为图片增加循环代码如下代码

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><!--幻灯片结束-->

复制代码接下来为滑动条增加数字

在<divclass="slidebar"></div>中增加娄字变量如下代码

1.<divclass="slidebar">

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

3.</div>

复制代码

其中{currentorder}是当前显示的顺序数字,其中[loop1]...[/loop1]为循环，你可能注意到了，这里用了[loop1],如果一个模块中需要多次循环时就可以使用loop1、loop2、loop3以此类推来实现多处循环的目的

最后增加脚本代码如下以下代码放在模块代码的最后

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样式来配合美化一下

下面讲解一些高级参数

1、滑动条如何控制让用户点击还是滑动

在<divclass="slidebar">中加入参数（鼠标滑动）mevent="mouseover"或（鼠标点击）mevent="click"完整代码如下以下代码实现点击后变换1.<divclass="slidebar"mevent="click">2.[loop1]<span>{currentorder}</span>[/loop1]

3.</div>

复制代码

2、如何实现上一个下一个的效果如下图样式

添加如下代码即可实现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的内容展示不全或不在一个区域时我们提供了更多内容的展示方法在需要展示的地方增加如下代码

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">增加参数如下代码其中timestep="3000"为毫秒

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

复制代码

5、如何实现一次显示多个图片，每次切换多个如下图样式

在<divclass="slidebox">增加参数如下代码

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

复制代码

其中slidenum="3"表示显示数量，slidestep="1"表示每点击一次左右按扭移动的次数

以上为幻灯片的所有功能

下面提供演示站点中门户及频道所用到的幻灯片代码（大家可以参照所提供的代码制作出炫丽的幻灯片）

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

效果一

实现代码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>

复制代码

效果二

实现代码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>

复制代码

效果三

实现代码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.

复制代码

效果四

实现代码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>

复制代码

效果五

实现代码..

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>

复制代码

效果六

实现代码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>

复制代码

效果七

实现代码

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>

复制代码

效果八

实现代码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