1.全方位立体式讲解DIY技巧集锦
今天为大家讲解一下 在使用DIY过程中的一些技巧与方法
仔细阅读，受益匪浅
一、如何在模块中增加“标题”及 “更多”的链接 如下图样式
2010-9-27 10:02 上传
下载附件 (21.58 KB)
方法：通过框架或模块都可以实现上述样式 ，我们以框架为例，我们在DIY的时候选中要编辑的框架点击编辑 如下图所示
2010-9-27 09:50 上传
下载附件 (22.02 KB)
之后点击标题
2010-9-27 09:59 上传
下载附件 (2.28 KB)
在弹出的层中可以添加标题及链接,位置选择居左如下图所示同时可以设置标题的颜色及大小
2010-9-27 10:08 上传
下载附件 (9.69 KB)
接下来增加“更多”的链接点击弹出层的添加新标题按扭 如下图所示，会“复制”出一份新的标题你只需修改就可以了把其中的“精彩教程” 改成“更多” ，链接以及字体、颜色都进行修改就可以了，这里的位置一定要选择“居右”
2010-9-27 10:15 上传
下载附件 (13.22 KB)
完成，这样框架就有了标题及更多 ，模块的方法同上
二、DIY的模块中如何调整链接的颜色 如下图样式
2010-9-27 10:26 上传
下载附件 (28.05 KB)
方法：选中要修改的模块 ， 点击编辑，选择数据如下图所示
2010-9-27 10:42 上传
下载附件 (20.86 KB)
在弹出层中选择 编辑 如下图所示
2010-9-27 10:45 上传
下载附件 (20.49 KB)
在弹出的层中 可以对标题进行 加粗、斜体、加下划线、修改颜色 等操作
2010-9-27 12:17 上传
下载附件 (15 KB)
完成
三、如何在现有的模块中添加新的数据选中要添加数据的模块 点击编辑–数据如下图所示
在弹出的层中 选择任意一条数据点击编辑如下图所示
点击编辑后 在弹出的层中选择从数据源获取 此处可以添写帖子ID、文章ID、日志ID、图片ID 来获取数据如下图所示
2010-9-27 12:58 上传
下载附件 (15.02 KB)
点击获取会填充模块内相应的数据字段 （此处的数据字段会根据模块样式的不同有所变化，请注意）完成
四、DIY时如何调用外部程序的数据当我们与第三方程序整合后 如何在门户、频道、论坛、或可以DIY的区域调用这些第三方程序的数据首先我们可以在需要调用的地方拖一个展示类中的静态模块 如下图所示
2010-9-27 13:15 上传
下载附件 (31.44 KB)
如上图所示 选择数据来源为“自定义HTML”一般第三方系统的数据调用都会有输出JS格式的 我们把第三方程序提供的JS代码粘贴进 HTML代码框就可以了如下图所示
2010-9-27 13:21 上传
下载附件 (10.65 KB)
完成
五、首页多格或首页四格如何DIY出来我们以论坛首页为例 （在任何页面都可以） 来制作一个首页四格首先在论坛首页拖一个 1:1的框架如下图所示
2010-9-27 13:36 上传
下载附件 (47.78 KB)
接下来向已拖好的1-1框架的框架里 左侧的1 里面拖入一个1:1的框架 如下图所示
2010-9-27 13:41 上传
下载附件 (48.89 KB)
接下来向右侧的1里面也拖入一个1:1的框架如下图所示
2010-9-27 13:52 上传
下载附件 (41.48 KB)
接下来我们就可以通过拖拽模块到框架中去了
2010-9-27 14:44 上传
下载附件 (28.15 KB)
此时我们可以去掉框架的标题 ，同时为每一个模块增加一个标题 如下图所示
2010-9-27 14:48 上传
下载附件 (16.51 KB)
你可以通过不同的模块样式或者CSS来美化这里 完成
六、如何修改整个模块的链接样式比如下图
2010-9-27 15:04 上传
下载附件 (10.25 KB)
方法：选中要编辑的模块，点击编辑–样式 进行修改 如下图所示
2010-9-27 15:09 上传
下载附件 (13.95 KB)
以上修改针对整个模块完成
七、如何修改两个模块或两个框架之间的距离如下图样式
2010-9-27 15:45 上传
下载附件 (5.19 KB)
选择要编辑的框架或者模块，点击编辑–样式 选择外边距，勾选分别设置 ，在右边距中写入合适的数字就可以了 例如10如下图所示
2010-9-27 15:51 上传
下载附件 (9.93 KB)
完成后的效果 如下图样式
2010-9-27 15:53 上传
下载附件 (4.74 KB)
完成
全方位立体式讲解DIY技巧集锦第二弹
一、DIY中TAB框架如果切换点击方式（鼠标点击与鼠标滑过） 如下图中的效果如何实现
2010-10-11 09:53 上传
下载附件 (5.3 KB)
实现方法：拖一个TAB框架到页面中，点编辑，选择标题 如下图所示
2010-10-11 09:53 上传
下载附件 (4.01 KB)
在弹出的窗口中选择切换类型 如下图所示。
2010-10-11 09:53 上传
下载附件 (9.4 KB)
你可以根据你的需要选择是点击还是滑过完成
二、在DIY模块中的模块数据中固定是什么意思，如下图
2010-10-11 10:50 上传
下载附件 (18.17 KB)
解答： 当勾选固定后 此条数据将不会随着模块属性当中的条件进行更新，也就是说，此条数据将永久不变，除非把勾选去掉
三、如何实现两个模块中间一条竖线的效果，如下图效果
2010-10-11 15:13 上传
下载附件 (19.99 KB)
实现方法 选中要操作的DIY模块 选择样式如下图所示
2010-10-11 15:41 上传
下载附件 (23.98 KB)
在弹出的层中 ，选择边框的分别设置 ，在边框的“左” 大小 设置为1px，“样式”选择实线，“颜色”选择灰色，如下图所示
2010-10-11 15:37 上传
下载附件 (12.51 KB)
这样设置后 我们就能看到一个边线了这时你会看到内容与边线挤在了一起如下图所示
2010-10-11 15:47 上传
下载附件 (14.77 KB)
接下来我们进行调整内边距改变上图中的样式同理，打开样式编辑层选择“内边距” 点分别设置 在“左”中添加10px
2010-10-11 16:17 上传
下载附件 (13.06 KB)
调整后如下图所示
2010-10-11 16:20 上传
下载附件 (14.98 KB)
大家可以根据实际情况调整 内、外边距的大小与边框的设置 ，灵活使用
四、如何将一个文章模块转换为一个帖子模块 比如官方提供的门户及频道都是文章类模块，我们如何转换为帖子类 编辑模块的属性把其中的模块分类进行切换如下图所示
2010-10-11 16:37 上传
下载附件 (12.89 KB)
选择帖子模块就可以变换这里要注意切换之后，原来的模块样式将变成私有的（自定义样式）修改显示样式只能通过模块模板进行修改
五、如何在模板（官方发布的频道及门户）里面插入DIY区域，如下图所示
2010-10-11 17:39 上传
下载附件 (454.37 KB)
首先打开 模板文件 例如亲子模板， 打开template\default\portal\list_baby.htm文件找到这两段代码的之间插入一行代码
1. <!–[diy=guanggao]–><div id="guanggao" class="area"></div><!–[/diy]–>
复制代码
其中 “guanggao” 可以任意取名，注意 不可与本模板中其它重名，必须保证唯一性 如下图所示
2010-10-11 17:53 上传
下载附件 (7.55 KB)
完成
教你如何把切割好的html页面转换成可供DIY的页面（高级教程）
天给大家讲讲 如何把已经切割好的html页面或者模仿的页面转换成可供DIY的页面
请跟随教程一步一步操作如有疑问请提出
以下以家居频道为例为大家讲解我们常见的切割好的html页面包含这么几个元素如下图图片文件夹、CSS文件夹、其它文件或图片文件夹、一个html页面
2010-9-26 10:14 上传
下载附件 (2.65 KB)
大家看下页面效果
2010-9-26 10:32 上传
下载附件 (1.61 MB)
接下来，我们就把这个页面转换成DIY页面首页我们用编辑工具打开 index.html页面我们为了能够使用统一的头部样式，这里面我们引入系统内置的头部文件（header）把页面中的关于头部的信息删除如下图所示
2010-9-26 10:50 上传
下载附件 (79.28 KB)
把系统头部（header）引入进来引用代码
1. <!–{subtemplate common/header}–>
复制代码
如下图所示
2010-9-26 10:53 上传
下载附件 (14.82 KB)
给新的模板起个名字如下代码
1. <!–[name]家居频道模板[/name]–>
复制代码
如下图所示
2010-9-26 11:22 上传
下载附件 (15.25 KB)
接下来增加可供DIY的CSS样式表如下代码
1. <style id="diy_style" type="text/css"></style>
复制代码
如下图所示
2010-9-26 11:27 上传
下载附件 (16.22 KB)
头部接下来更换底部代码找到底部代码删除掉 换成系统内置的通用底部代码 如下图所示
2010-9-26 11:44 上传
下载附件 (22.92 KB)
增加如下代码
1. <!–{subtemplate common/footer}–>
复制代码
如下图所示
2010-9-26 11:47 上传
下载附件 (5.03 KB)
到此基本改造完成 接下来我们把改造好的文件放在系统目录中去首先我们把index.html文件改名把index.html改成list_home.htm 此处一定要注意频道模板必须以list_开头，后缀名为.htm把改好名的list_home.htm文件拷贝到 template\default\portal 目录下同时在template\default\portal 目录新建一个home文件夹 用来放家居频道的图片及样式表此时复制 原来的文件夹
2010-9-26 11:58 上传
下载附件 (4.5 KB)
到template\default\portal 目录的home文件夹 如下图所示
2010-9-26 13:11 上传
下载附件 (7.52 KB)
接下来 用编辑器打开list_home.htm文件引入样式表文件代码如下
1. <link href="$_G[‘setting’][‘csspath’]template/default/portal/home/style/style.css" rel="stylesheet" type="text/css" />
复制代码
如下图所示
2010-9-26 13:20 上传
下载附件 (12.99 KB)
同进查找<img src="images/ 替换成 <img src="template/default/portal/home/images/接下来 我们进入后台创建一个频道模板名选择 “家居频道模板” 如下图
2010-9-26 13:45 上传
下载附件 (30.21 KB)
创建完成后，点击查看 就能看到已与系统完全整合的模板了 接下来我们把模板中的占位用的假数据换成DIY区域用编辑器打开list_home.htm文件大家会看到有类似的如下代码
1. <div class="list">
2. <ul>
3. <li><a href="#" class="gray">[装修资讯]</a> <a href="#">七步改造计 为夏日客厅换新颜</a></li>
4. <li><a href="#" class="gray">[行业资讯]</a> <a href="#">拆改承重墙如同醉驾需缴费</a></li>
5. <li><a href="#" class="gray">[装修资讯]</a> <a href="#">玩转极简主义 构造冷色系居室空间</a></li>
6. <li><a href="#" class="gray">[家居风水]</a> <a href="#">周星驰于文凤分手 防小三家居风水</a></li>
7. <li><a href="#" class="gray">[装修资讯]</a> <a href="#">小身材大味道 边角料再利用</a></li>
8. <li><a href="#" class="gray">[装修资讯]</a> <a href="#">茶几布局 随性设计耐保养</a></li>
9. </ul>
10. </div>
复制代码
把其中的
1. <ul>
2. <li><a href="#" class="gray">[装修资讯]</a> <a href="#">七步改造计 为夏日客厅换新颜</a></li>
3. <li><a href="#" class="gray">[行业资讯]</a> <a href="#">拆改承重墙如同醉驾需缴费</a></li>
4. <li><a href="#" class="gray">[装修资讯]</a> <a href="#">玩转极简主义 构造冷色系居室空间</a></li>
5. <li><a href="#" class="gray">[家居风水]</a> <a href="#">周星驰于文凤分手 防小三家居风水</a></li>
6. <li><a href="#" class="gray">[装修资讯]</a> <a href="#">小身材大味道 边角料再利用</a></li>
7. <li><a href="#" class="gray">[装修资讯]</a> <a href="#">茶几布局 随性设计耐保养</a></li>
8. </ul>
复制代码
换成
1. <!–[diy=diy1]–><div id="diy1" class="area"></div><!–[/diy]–>
复制代码
完成后是这个样子
1. <div class="list">
2. <!–[diy=diy1]–><div id="diy1" class="area"></div><!–[/diy]–>
3. </div>
复制代码
其中的 [diy=diy1] 和 div id="diy1"要匹配 且 在一个页面中不能重复 如果要在第二个区域里面使用的话就应该是[diy=diy2] 和 div id="diy2" 或者[diy=home] 和 div id="home" 或者[diy=discuz] 和 div id="discuz" 只要在一个页面内不重复随你怎么写都可以如下图所示
2010-9-26 14:15 上传
下载附件 (13.47 KB)
此时就完成了占位数据 转换成DIY区域的过程在上面的过程中 这样的替换并不是最优化的，我们接下来进行改进，让DIY更加灵活此处的结构是这样子的如下图
2010-9-26 14:21 上传
下载附件 (17.3 KB)
实现它的代码是这样子的
1. <div class="focus_div focustoday">
2. <h2><a href="#">玩转极简主义 构造冷色系居室空间</a></h2>
3. <p>今夏最流行的设计当属极简主义，色彩也从华丽深沉转变为了优雅素净。玻璃、金属、木质等较能体现简单特性的材质..<a href="#">[详细]</a></p>
4. <div class="list">
5. <ul>
6. <li><a href="#" class="gray">[装修资讯]</a> <a href="#">七步改造计 为夏日客厅换新颜</a></li>
7. <li><a href="#" class="gray">[行业资讯]</a> <a href="#">拆改承重墙如同醉驾需缴费</a></li>
8. <li><a href="#" class="gray">[装修资讯]</a> <a href="#">玩转极简主义 构造冷色系居室空间</a></li>
9. <li><a href="#" class="gray">[家居风水]</a> <a href="#">周星驰于文凤分手 防小三家居风水</a></li>
10. <li><a href="#" class="gray">[装修资讯]</a> <a href="#">小身材大味道 边角料再利用</a></li>
11. <li><a href="#" class="gray">[装修资讯]</a> <a href="#">茶几布局 随性设计耐保养</a></li>
12. </ul>
13. </div>
14. </div>
复制代码
我们可以把整个区域做为一个DIY区域接下来 我们进入后台–》门户–》模块模板–》点击添加，这里我们以文章为例，选择文章类 进行提交为模板起个名称比如“首页中间列表”删除代码框里面的内容 拷贝上面的代码进来
1. <div class="focus_div focustoday">
2. <h2><a href="#">玩转极简主义 构造冷色系居室空间</a></h2>
3. <p>今夏最流行的设计当属极简主义，色彩也从华丽深沉转变为了优雅素净。玻璃、金属、木质等较能体现简单特性的材质..<a href="#">[详细]</a></p>
4. <div class="list">
5. <ul>
6. <li><a href="#" class="gray">[装修资讯]</a> <a href="#">七步改造计 为夏日客厅换新颜</a></li>
7. <li><a href="#" class="gray">[行业资讯]</a> <a href="#">拆改承重墙如同醉驾需缴费</a></li>
8. <li><a href="#" class="gray">[装修资讯]</a> <a href="#">玩转极简主义 构造冷色系居室空间</a></li>
9. <li><a href="#" class="gray">[家居风水]</a> <a href="#">周星驰于文凤分手 防小三家居风水</a></li>
10. <li><a href="#" class="gray">[装修资讯]</a> <a href="#">小身材大味道 边角料再利用</a></li>
11. <li><a href="#" class="gray">[装修资讯]</a> <a href="#">茶几布局 随性设计耐保养</a></li>
12. </ul>
13. </div>
14. </div>
复制代码
如下图所示
2010-9-26 14:31 上传
下载附件 (39.54 KB)
接下来把代码框中的代码进行转换把以下代码
1. <div class="focus_div focustoday">
2. <h2><a href="#">玩转极简主义 构造冷色系居室空间</a></h2>
3. <p>今夏最流行的设计当属极简主义，色彩也从华丽深沉转变为了优雅素净。玻璃、金属、木质等较能体现简单特性的材质..<a href="#">[详细]</a></p>
4. <div class="list">
5. <ul>
6. <li><a href="#" class="gray">[装修资讯]</a> <a href="#">七步改造计 为夏日客厅换新颜</a></li>
7. <li><a href="#" class="gray">[行业资讯]</a> <a href="#">拆改承重墙如同醉驾需缴费</a></li>
8. <li><a href="#" class="gray">[装修资讯]</a> <a href="#">玩转极简主义 构造冷色系居室空间</a></li>
9. <li><a href="#" class="gray">[家居风水]</a> <a href="#">周星驰于文凤分手 防小三家居风水</a></li>
10. <li><a href="#" class="gray">[装修资讯]</a> <a href="#">小身材大味道边角料再利用</a></li>
11. <li><a href="#" class="gray">[装修资讯]</a> <a href="#">茶几布局 随性设计耐保养</a></li>
12. </ul>
13. </div>
14. </div>
复制代码
改造成如下代码
1. <div class="focus_div focustoday">
2.
3. [index=1]
4. <h2><a href="{url}"{target}>{title}</a></h2>
5. <p>{summary}<a href="{url}"{target}>[详细]</a></p>
6. [/index]
7.
8. <div class="list">
9. <ul>
10. [loop]
11. <li><a href="{caturl}" {target}class="gray">[{catname}]</a> <a href="{url}"{target}>{title}</a></li>
12. [/loop]
13. </ul>
14. </div>
15. </div>
复制代码
其中 {title} 表示标题，{url} 表示 链接，{target} 表示链接打开的方式，{summary}表示文章的简介。其它内容请参考说明其中[index=1]… [/index]表示第一条数据
1. [index=1]
2. <h2><a href="{url}"{target}>{title}</a></h2>
3. <p>{summary}<a href="{url}"{target}>[详细]</a></p>
4. [/index]
复制代码
其中 [loop]…[/loop]表示循环
1. [loop]
2. <li><a href="{caturl}" {target} class="gray">[{catname}]</a> <a href="{url}"{target}>{title}</a></li>
3. [/loop]
复制代码
现在模块模板就制作完成了接下来 我们在频道的前台进行调用在频道的前台页面 点DIY会看到中间部分没有内容 会多出一个浅色的条 便是DIY区域如下图
2010-9-26 14:53 上传
下载附件 (13.36 KB)
我们在DIY区域里面拖入一个100%的框架把标题去掉如下图
2010-9-26 14:56 上传
下载附件 (6.87 KB)
接下来选择样式 把边框设为0PX ，外边距也设为0PX如下图
2010-9-26 15:00 上传
下载附件 (8.07 KB)
完成后 在此框架内拖入一个文章模块 并选择刚才创建的模块样式，如下图
2010-9-26 15:04 上传
下载附件 (18.15 KB)
完成后选择样式把边框、外边距、内边距都设为0PX如下图
2010-9-26 15:09 上传
下载附件 (11.22 KB)
到此模板的制作就完成了，其它内容可仿造以上设置 进行制作
百变幻灯片，完全DIY（高级教程）
在DIY时如何调用幻灯片，幻灯片该如何制作，这一讲我们来教大家如何制作幻灯片
请跟随教程从头到尾仔细阅读，你将收获不小
第一步制作幻灯片：后台–》门户–》模块模板点击 添加按扭 如下图所示
2010-9-25 10:48 上传
下载附件 (12.23 KB)
此处可以可以选择不同的模块分类如 附件类、帖子类、文章类、图片类等等 可以根据你的喜好选择不同的模块分类下面我们以文章类为例来讲解，选择文章分类 点提交 如下图所示 ，为新建的模块起个名字 如 “百变幻灯片”把代码框里面的内容全部删除
2010-9-25 10:56 上传
下载附件 (27.19 KB)
接下来 我们输入代码首先在代码框里面输入
1. <div class="slidebox"></div>
复制代码
如下图所示
2010-9-25 11:07 上传
下载附件 (13.58 KB)
1. <div class="slideshow"></div>
复制代码
1. <div class="slidebox">
2.
3. <div class="slideshow"></div>
4.
5. </div>
复制代码
接下来我们来增加“滑动”、“点击”的代码
1. <div class="slidebar"></div>
复制代码
1. <div class="slidebox"><!–幻灯片开始–>
2.
3. <div class="slideshow"> </div><!–图片展示–>
4.
5. <div class="slidebar"> </div><!–幻灯片控制展示–>
6.
7. </div><!–幻灯片结束–>
复制代码
以上代码已完成幻灯片的框架 接下来我们为幻灯片添加数据代码在<div class="slideshow"> </div> 代码中间插入图片显示代码如下代码
1. <div class="slideshow"><img src="{pic}" width="{picwidth}" height="{picheight}" /> </div><!–图片展示–>
复制代码
其中{pic} 为图片地址变量， {picwidth}为图片宽度变量，{picheight}为图片高度变量接下来为图片增加循环代码 如下代码
1. [loop]
2. <img src="{pic}" width="{picwidth}" height="{picheight}" />
3. [/loop]
复制代码
完整代码如下
1. <div class="slidebox"><!–幻灯片开始–>
2. <div class="slideshow">
3. [loop]
4. <img src="{pic}" width="{picwidth}" height="{picheight}" />
5. [/loop]
6. </div>
7. <!–图片展示–>
8. <div class="slidebar"> </div><!–幻灯片控制展示–>
9. </div><!–幻灯片结束–>
复制代码
接下来 为滑动条增加数字在<div class="slidebar"> </div>中增加娄字变量 如下代码
1. <div class="slidebar">
2. [loop1]<span>{currentorder}</span>[/loop1]
3. </div>
复制代码
其中{currentorder} 是当前显示的顺序数字,其中[loop1]…[/loop1] 为循环，你可能注意到了，这里用了[loop1] ,如果一个模块中需要多次循环时就可以使用 loop1、loop2、loop3 以此类推 来实现多处循环的目的最后增加脚本代码 如下以下代码放在模块代码的最后
1. <script type="text/javascript">
2. runslideshow();
3. </script>
复制代码
此时一个简单的幻灯片就完成了 ，幻灯片的完整代码 如下
1. <div class="slidebox"><!–幻灯片开始–>
2. <div class="slideshow">
3. [loop]
4. <img src="{pic}" width="{picwidth}" height="{picheight}" />
5. [/loop]
6. </div>
7. <!–图片展示–>
8. <div class="slidebar">
9. [loop1]<span>{currentorder}</span>[/loop1]
10. </div><!–幻灯片控制展示–>
11. </div><!–幻灯片结束–>
12.
13. <script type="text/javascript">
14. runslideshow();
15. </script>
复制代码
如下图所示
2010-9-25 12:01 上传
下载附件 (16.18 KB)
此时我们就可以通过前台DIY调用了如下图所示 调用
2010-9-25 13:46 上传
下载附件 (13.82 KB)
显示效果
2010-9-25 13:46 上传
下载附件 (38.19 KB)
至此简易幻灯片就完成了，需要你通过CSS样式来配合美化一下下面讲解一些高级参数1、滑动条如何控制让用户点击还是滑动 在<div class="slidebar"> 中加入参数（鼠标滑动）mevent="mouseover"或 （鼠标点击）mevent="click" 完整代码如下以下代码实现点击后变换
1. <div class="slidebar" mevent="click">
2. [loop1]<span>{currentorder}</span>[/loop1]
3. </div>
复制代码
2、如何实现上一个 下一个的效果 如下图样式
2010-9-25 12:18 上传
下载附件 (759 Bytes)
添加如下代码即可实现
1. <div class="slidebarup">
2. <span>up</span>
3. </div>
4.
5. <div class="slidebardown">
6. <span>down</span>
7. </div>
复制代码
3、当 slideshow的内容展示不全或 不在一个区域时我们提供了 更多内容的展示方法在需要展示的地方增加如下代码
1. <div class="slideother">
2. <span>可以是任何内容</span>
3. </div>
复制代码
同时支持多个slideother 如下代码
1. <div class="slideother">
2. <span>内容一</span>
3. </div>
4.
5. <div class="slideother">
6. <span>内容二</span>
7. </div>
复制代码
4、如何控制幻灯片播放的速度 在<div class="slidebox" >增加参数如下代码其中 timestep="3000"为毫秒
1. <div class="slidebox" timestep="3000">
复制代码
5、如何实现 一次显示多个图片，每次切换多个 如下图样式
2010-9-25 13:40 上传
下载附件 (13.52 KB)
在<div class="slidebox" >增加参数如下代码
1. <div class="slidebox"slidenum="3" slidestep="1">
复制代码
其中slidenum="3"表示显示数量， slidestep="1" 表示每点击一次左右按扭移动的次数以上为幻灯片的所有功能下面提供演示站点中门户及频道所用到的幻灯片代码 （大家可以参照所提供的代码制作出炫丽的幻灯片）以下所示效果都需要CSS配合效果一
2010-9-25 13:52 上传
下载附件 (48.82 KB)
实现代码
1. <div class="slidebox">
2. <div class="slideshow">
3. [loop]
4. <a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a>
5. [/loop]
6. </div>
7. <div class="bignews_btns">
8. <div class="btns slidebar">
9. [loop1]
10. <em></em>
11. [/loop1]
12. </div>
13. <div class="desc slideother">
14. [loop2]
15. <a href="{url}"{target}>{title}</a>
16. [/loop2]
17. </div>
18. </div>
19. </div>
20. <script type="text/javascript">
21. runslideshow();
22. </script>
复制代码
效果二
2010-9-25 13:55 上传
下载附件 (6.85 KB)
实现代码
1. <div class="slidebox" timestep="3000">
2. <div class="thumb on slideshow" >
3. [loop]
4. <span>
5. <a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a>
6. <p><a href="{url}"{target}>查看</a></p>
7. </span>
8. [/loop]
9. </div>
10. <div class="product_desc">
11. <div class="on slideother" >
12. [loop1]
13. <span>
14. <h2 class="title"><a href="{url}"{target}>{title}</a></h2>
15. <p>{summary}</p>
16. </span>
17. [/loop1]
18. </div>
19. <div class="product_price on slideother" >
20. [loop2]
21. <span>{dateline}</span>
22. [/loop2]
23. </div>
24. <div class="btns slidebar">
25. [loop3]<em>{currentorder}</em>[/loop3]
26. </div>
27. </div>
28. </div>
29. <script type="text/javascript">
30. runslideshow();
31. </script>
复制代码
效果三
2010-9-25 13:58 上传
下载附件 (13.61 KB)
实现代码
1. <div class="slidebox" slidenum="3" slidestep="1" >
2. <div class="leftbtn slidebarup"><a href="javascript:void(0);" mevent="click" ><img src="template/default/portal/index/images/commend_bg_2_leftbtn.gif" /></a></div>
3. <div class="middle cl" >
4. <ul class="slideshow">
5. [loop]<li><a href="{url}"{target}><img src="{avatar_big}" width="{picwidth}" height="{picheight}" /></a><p><a href="{url}"{target}>{title}</a></p></li>[/loop]
6. </ul>
7. </div>
8. <div class="rightbtn slidebardown "><a href="javascript:void(0);" mevent="click"><img src="template/default/portal/index/images/commend_bg_2_rightbtn.gif" /></a></div>
9. </div>
10. <script type="text/javascript">
11. runslideshow();
12. </script>
13.
复制代码
效果四
2010-9-25 14:02 上传
下载附件 (30.53 KB)
实现代码
1. <div class="photobox cl slidebox" timestep="3000">
2. <div class="z leftbtn">
3. <span>美食大赏</span>
4. <div class="slidebar">
5. [loop]
6. <em></em>
7. [/loop]
8. </div>
9. </div>
10. <div class="y rightpic">
11. <div class="slideshow">
12. [loop1]
13. <div>
14. <a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a>
15. <p><a href="{url}"{target}>{title}</a></p>
16. </div>
17. [/loop1]
18. </div>
19. </div>
20. </div>
21. <script type="text/javascript">
22. runslideshow();
23. </script>
复制代码
效果五
2010-9-25 14:05 上传
下载附件 (100.65 KB)
实现代码
1. <div class="z slidebox">
2. <div class="box slideshow">
3. [loop]
4. <div>
5. <a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}"/></a>
6. </div>
7. [/loop]
8. </div>
9. <div class="box_btn cl slidebar">
10. [loop1]
11. <div>
12. <span>{title}</span>
13. </div>
14. [/loop1]
15. </div>
16. <div class="box_desc slideother">
17. [loop2]
18. <p>
19. <a href="{url}"{target}>{summary}</a></p>
20. [/loop2]
21. </div>
22. </div>
23. <script type="text/javascript">
24. runslideshow();
25. </script>
复制代码
效果六
2010-9-25 14:09 上传
下载附件 (45.85 KB)
实现代码
1. <div class="bignews slidebox " >
2. <div class="slideshow">[loop]<a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}"/></a>[/loop]</div>
3. <div class="btns slidebar">
4. [loop1]
5. <em>{currentorder}</em>
6. [/loop1]
7. </div>
8. </div>
9. <script type="text/javascript">
10. runslideshow();
11. </script>
复制代码
效果七
2010-9-25 14:12 上传
下载附件 (14.85 KB)
实现代码
1. <div class="slidebox ">
2. <div class="slideshow">[loop]<a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}"/></a>[/loop]</div>
3. <dd class="slidebar">
4. [loop1]
5. <em><a href="#"><img src="template/default/portal/food/images/num/0{currentorder}.gif" /></a></em>
6. [/loop1]
7. </dd>
8. <div class="slideother">
9. [loop2]
10. <div><div class="title">
11. <a href="{url}"{target}>{title}</a>
12. </div>
13. <p>
14. {summary}
15. </p></div>
16. [/loop2]
17. </div>
18. </div>
19. <script type="text/javascript">
20. runslideshow();
21. </script>
复制代码
效果八
2010-9-25 14:15 上传
下载附件 (68.99 KB)
实现代码
1. <div class="bignews slidebox">
2. <div class="picbox slideshow">
3. [loop]<div><img src="{pic}" width="{picwidth}" height="{picheight}" /></div>[/loop]
4. </div>
5. <div class="bignews_btn slidebar" mevent="mouseover" >
6. [loop1]
7. <div >
8. <p>
9. <strong><a href="{url}"{target}>{title}</a></strong>
10. <em>{summary}</em>
11. </p>
12. <img src="{pic}" width="60" height="66"/>
13. </div>
14. [/loop1]
15. </div>
16. </div>
17. <script type="text/javascript">
18. runslideshow();
19. </script>
复制代码
效果九
2010-9-25 14:17 上传
下载附件 (42.58 KB)
实现代码
1. <div class="slidebox">
2.
3. <div class="slideshow">
4. [loop]
5. <a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a>
6. [/loop]
7. </div>
8. <div class="btn">
9. <em class="slidebarup"><img src="template/default/portal/car/images/bignews_btn_left.gif" /></em>
10. <em class="slidebar">[loop1]<span><img src="template/default/portal/car/images/empty_img.gif" width="8" height="8"/></span>[/loop1]</em>
11. <em class="slidebardown"><img src="template/default/portal/car/images/bignews_btn_right.gif" /></em>
12. </div>
13. <div class="bignews_title slideother">
14. [loop2]
15. <em><a href="{url}"{target}>{title}</a></em>
16. [/loop2]
17. </div>
18. </div>
19. <script type="text/javascript">
20. runslideshow();
21. </script>
复制代码
效果十
2010-9-25 14:21 上传
下载附件 (65.43 KB)
实现代码
1. <div class="slidebox">
2. <div class="bignews">
3. <div class="slideshow">
4. [loop]
5. <a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a>
6. [/loop]
7. </div>
8. </div>
9. <div class="bignewsdesc">
10. <div class="bignewsbtn">
11. <em class="slidebarup"><img src="template/default/portal/home/images/bignews_left.gif" /></em>
12. <span class="slidebar">
13. [loop1]
14. <em>{currentorder}</em>
15. [/loop1]
16. </span>
17. <em class="slidebardown"><img src="template/default/portal/home/images/bignews_right.gif" /></em>
18. </div>
19. <div class="slideother">
20. [loop2]
21. <dd >
22. <h2><a href="{url}"{target}>{title}</a></h2>
23. <p><a href="{url}"{target}>{summary}</a></p>
24. </dd>
25. [/loop2]
26. </div>
27. </div>
28. </div>
29. <script type="text/javascript">
30. runslideshow();
31. </script>
复制代码
大家可以参照上面提供的十套代码 仔细研究一下。百变幻灯 随你而变感谢大家
我爱你….为了你的幸福，我愿意放弃一切—包括你。
