[功能介绍]百变幻灯片,完全DIY(高级教程).docVIP

在DIY时如何调用幻灯片，幻灯片该如何制作，这一讲我们来教大家如何制作幻灯片 请跟随教程从头到尾仔细阅读，你将收获不小 第一步制作幻灯片：后台--》门户--》模块模板点击 添加按扭 如下图所示 2010-9-25 10:48 上传 下载附件 (12.23 KB) 此处可以可以选择不同的模块分类如 附件类、帖子类、文章类、图片类等等 可以根据你的喜好选择不同的模块分类下面我们以文章类为例来讲解，选择文章分类 点提交 如下图所示 ，为新建的模块起个名字 如 “百变幻灯片”??把代码框里面的内容全部删除 2010-9-25 10:56 上传 下载附件 (27.19 KB) 接下来 我们输入代码 首先在代码框里面输入 div class=slidebox/div 复制代码 其中的div可以是任意标签，如table，span等，我们这里以div为例此处的标签必须加一个class=slidebox的属性 如下面代码所示 ，只有包含在有class=slidebox属性的标签里面的内容才是幻灯片 ，切记如下图所示 2010-9-25 11:07 上传 下载附件 (13.58 KB) 接下来，我们增加幻灯代码??下面代码用来实现图片（或内容）的显示作用 属性必须为class=slideshow的标签 div class=slideshow/div 复制代码 上面的代码必须放在 class=slidebox的属性的标签里面 上面已经讲过 ，完整代码如下 div class=slidebox div class=slideshow/div /div 复制代码 接下来我们来增加“滑动”、“点击”的代码? ? div class=slidebar/div 复制代码 上面的代码必须放在 class=slidebox的属性的标签里面 上面已经讲过 ，完整代码如下 div class=slidebox!--幻灯片开始-- div class=slideshow /div!--图片展示-- div class=slidebar /div!--幻灯片控制展示-- /div!--幻灯片结束-- 复制代码 以上代码已完成幻灯片的框架 接下来我们为幻灯片添加数据代码 在div class=slideshow /div 代码中间插入图片显示代码如下代码 div class=slideshowimg src={pic} width={picwidth} height={picheight} / /div!--图片展示-- 复制代码 其中{pic} 为图片地址变量， {picwidth}为图片宽度变量，{picheight}为图片高度变量接下来为图片增加循环代码 如下代码 [loop] img src={pic} width={picwidth} height={picheight} / [/loop] 复制代码 完整代码如下 div class=slidebox!--幻灯片开始-- div class=slideshow [loop] img src={pic} width={picwidth} height={picheight} / [/loop] /div !--图片展示-- div class=slidebar /div!--幻灯片控制展示-- /div!--幻灯片结束-- 复制代码 接下来 为滑动条增加数字 在div class=slidebar /div中增加娄字变量 如下代码 div class=slidebar [loop1]span{currentorder}/span[/loop1] /div 复制代码 其中{currentorder} 是当前显示的顺序数字??,其中[loop1]...[/loop1] 为循环，你可能注意到了，这里用了[loop1] ,如果一个模块中需要多次循环时就可以使用 loop1、loop2、loop3 以此类推 来实现多处循环的目的 最后增加脚本代码 如下??以下代码放在模块代码的最后 script type=text/javascript runslideshow(); /script 复制代码 此时一个简单的幻灯片就完成了 ，幻灯片的完整代码 如下 div class=slidebox!--幻灯片开始-- div class=slideshow [loop] img src={pic} width={picwidth} height={picheight} / [/loop] /div !--图片展示-- div class=slidebar [loop1]span{currentorder}/span[/loop1] /div!--幻灯片控