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

在DIY时如何调用幻灯片，幻灯片该如何制作，这一讲我们来教大家如何制作幻灯片 请跟随教程从头到尾仔细阅读，你将收获不小第一步制作幻灯片：后台-门户-模块模板点击 添加按扭 如下图所示2010-9-25 10:48 上传下载附件 (12.23 KB) 此处可以可以选择不同的模块分类如 附件类、帖子类、文章类、图片类等等 可以根据你的喜好选择不同的模块分类下面我们以文章类为例来讲解，选择文章分类 点提交 如下图所示 ，为新建的模块起个名字 如 “百变幻灯片”把代码框里面的内容全部删除 2010-9-25 10:56 上传下载附件 (27.19 KB) 接下来 我们输入代码 首先在代码框里面输入 1. 复制代码其中的div可以是任意标签，如table，span等，我们这里以div为例此处的标签必须加一个class=slidebox的属性 如下面代码所示 ，只有包含在有class=slidebox属性的标签里面的内容才是幻灯片 ，切记如下图所示2010-9-25 11:07 上传下载附件 (13.58 KB) 接下来，我们增加幻灯代码下面代码用来实现图片（或内容）的显示作用 属性必须为class=slideshow的标签1. 复制代码上面的代码必须放在 class=slidebox的属性的标签里面 上面已经讲过 ，完整代码如下1. 2.3. 4.5. 复制代码接下来我们来增加“滑动”、“点击”的代码 1. 复制代码上面的代码必须放在 class=slidebox的属性的标签里面 上面已经讲过 ，完整代码如下1. 2.3. 4.5. 6.7. 复制代码以上代码已完成幻灯片的框架 接下来我们为幻灯片添加数据代码 在 代码中间插入图片显示代码如下代码 1. 复制代码其中pic 为图片地址变量， picwidth为图片宽度变量，picheight为图片高度变量接下来为图片增加循环代码 如下代码1. loop2. 3. /loop复制代码完整代码如下1. 2. 3. loop4. 5. /loop6. 7. 8. 9. 复制代码接下来 为滑动条增加数字 在 中增加娄字变量 如下代码1. 2. loop1currentorder/loop13. 复制代码其中currentorder 是当前显示的顺序数字,其中loop1./loop1 为循环，你可能注意到了，这里用了loop1 ,如果一个模块中需要多次循环时就可以使用 loop1、loop2、loop3 以此类推 来实现多处循环的目的 最后增加脚本代码 如下以下代码放在模块代码的最后1. 2. runslideshow();3. 复制代码此时一个简单的幻灯片就完成了 ，幻灯片的完整代码 如下1. 2. 3. loop4. 5. /loop6. 7. 8. 9. loop1currentorder/loop110. 11. 12.13. 14. runslideshow();15. 复制代码如下图所示 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、滑动条如何控制让用户点击还是滑动 在 中加入参数（鼠标滑动）mevent=mouseover或 （鼠标点击）mevent=click 完整代码如下以下代码实现 点击后变换1. 2. loop1currentorder/loop13. 复制代码2、如何实现上一个 下一个的效果 如下图样式 2010-9-25 12:18 上传下载附件 (759 Bytes) 添加如下代码即可实现1. 2. up3. 4.5. 6. down7. 复制代码标签为 class=slidebarup 的为上一个 标签为class=slidebardown的为下一个3、当 slideshow的内容展示不全或 不在一个区域时 我们提供了 更多内容的展示方法在需要展示的地方增加如下代码1. 2. 可以是任何内容3. 复制代码同时支持多个slideother 如下代码1. 2. 内容一3. 4.5. 6. 内容二7. 复制代码4、如何控制幻灯片播放的速度 在增加参数如下代码其中 timestep=3000为毫秒 1. 复制代码5、如何实现 一次显示多个图片，每次切换多个 如下图样式2010-9-25 13:40 上传下载附件 (13.52 KB) 在增加参数如下代码 1. 复制代码其中slidenum=3表示显示数量， slidestep=1 表示每点击一次左右按扭 移动的次数 以上为幻灯片的所有功能下面提供演示站点中门户及频道所用到的幻灯片代码 （大家可以参照所提供的代码制作出炫丽的幻灯片）以下所示效果都需要CSS配合效果一2010-9-25 13:52 上传下载附件 (48.82 KB) 实现代码1. 2. 3. loop4. 5. /loop6. 7. 8. 9. loop110. 11. /loop112. 13. 14. loop215. title16. /loop217. 18. 19. 20. 21. runslideshow();22. 复制代码效果二2010-9-25 13:55 上传下载附件 (6.85 KB) 实现代码1. 2. 3. loop4. 5. 6. 查看7. 8. /loop9. 10. 11. 12. loop113. 14. title15. summary16. 17. /loop1 18. 19. 20. loop221. dateline22. /loop223. 24. 25. loop3currentorder/loop326. 27. 28. 29. 30. runslideshow();31. 复制代码效果三2010-9-25 13:58 上传下载附件 (13.61 KB) 实现代码1. 2. 3. 4. 5. looptitle/loop6. 7. 8. 9. 10. 11. runslideshow();12. 13.复制代码效果四2010-9-25 14:02 上传下载附件 (30.53 KB) 实现代码1. 2. 3. 美食大赏4. 5. loop6. 7. /loop8. 9. 10. 11. 12. loop113. 14. 15. title16. 17. /loop118. 19. 20. 21. 22. runslideshow();23. 复制代码效果五2010-9-25 14:05 上传下载附件 (100.65 KB) 实现代码1. 2. 3. loop4. 5. 6. 7. /loop8. 9. 10. loop111. 12. title13. 14. /loop115. 16. 17. loop218. 19. summary20. /loop221. 22. 23. 24. runslideshow();25. 复制代码效果六2010-9-25 14:09 上传下载附件 (45.85 KB) 实现代码1. 2. loop/loop3. 4. loop15. currentorder6. /loop17. 8. 9. 10. runslideshow();11. 复制代码效果七2010-9-25 14:12 上传下载附件 (14.85 KB) 实现代码1. 2. loop/loop3. 4. loop15. 6. /loop17. 8. 9. loop210. 11. title12. 13. 14. summary15. 16. /loop217. 18. 19. 20. runslideshow();21. 复制代码效果八2010-9-25 14:15 上传下载附件 (68.99 KB) 实现代码1. 2. 3. loop/loop4. 5. 6. loop17. 8. 9. title10. summary11. 12. 13. 14. /loop115. 16. 17. 18. runslideshow();19. 复制代码效果九2010-9-25 14:17 上传下载附件 (42.58 KB) 实现代码1. 2.3. 4. loop5. 6. /loop7. 8. 9. 10. loop1/loop111. 12. 13. 14. loop215. title16. /loop217. 18. 19. 20. runslideshow();21. 复制代码效果十2010-9-25 14:21 上传下载附件 (65.43 KB) 实现代码1. 2. 3. 4. loop5. 6. /loop7. 8. 9. 10. 11. 12. 13. loop114. currentorder15. /loop116. 17. 18. 19. 20. loop221. 22. title23. summary24. 25. /loop226. 27. 28. 29. 30. runslideshow();31. 复制代码大家可以参照上面提供的十套代码 仔细研究一下。百变幻灯 随你而变 感谢大家延伸阅读：全方位立体式讲解DIY技巧集锦/thread-1909461-1-1.html百变幻灯片，完全DIY（高级教程）/thread-1906721-1-1.html教你如何把切割好的html页面转换成可供DIY的页面（高级教程）/thread-1908115-1-1