设为首页收藏本站
开启辅助访问

一路 BBS

 找回密码
 注册
搜索
一路 BBS »论坛 › 站点管理分区 › DX转信测试 › 百变幻灯片，完全DIY（高级教程）
返回列表 发新帖
查看: 2835|回复: 1
打印 上一主题 下一主题

百变幻灯片，完全DIY（高级教程）

  [复制链接]
Fenlix
跳转到指定楼层
楼主
发表于 10-1-2010 10:58:50 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
本帖最后由 Fenlix 于 10-1-2010 12:44 编辑

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

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


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

点击 添加按扭 如下图所示

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

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

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

接下来 我们输入代码

首先在代码框里面输入
  1. <div class="slidebox"></div>
复制代码
其中的div可以是任意标签，如table，span等，我们这里以div为例

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


接下来，我们增加幻灯代码  下面代码用来实现图片（或内容）的显示作用 属性必须为class="slideshow"的标签

  1. <div class="slideshow"></div>
复制代码

上面的代码必须放在 class="slidebox"的属性的标签里面 上面已经讲过 ，完整代码如下

  1. <div class="slidebox">

  3. <div class="slideshow"></div>

  5. </div>
复制代码

接下来我们来增加“滑动”、“点击”的代码
  1. <div class="slidebar"></div>
复制代码
上面的代码必须放在 class="slidebox"的属性的标签里面 上面已经讲过 ，完整代码如下
  1. <div class="slidebox"><!--幻灯片开始-->

  3. <div class="slideshow"> </div><!--图片展示-->

  5. <div class="slidebar"> </div><!--幻灯片控制展示-->

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

  13. <script type="text/javascript">
  14. runslideshow();
  15. </script>
复制代码

如下图所示


此时我们就可以通过前台DIY调用了

如下图所示 调用


显示效果


至此简易幻灯片就完成了，需要你通过CSS样式来配合美化一下

下面讲解一些高级参数

1、滑动条如何控制让用户点击还是滑动  
      在<div class="slidebar"> 中加入参数  （鼠标滑动）mevent="mouseover"  或   （鼠标点击）mevent="click"   
      完整代码如下  以下代码实现 点击后变换
  1. <div class="slidebar" mevent="click">
  2. [loop1]<span>{currentorder}</span>[/loop1]
  3. </div>
复制代码

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


   
    添加如下代码即可实现
  1. <div class="slidebarup">
  2. <span>up</span>
  3. </div>

  5. <div class="slidebardown">
  6. <span>down</span>
  7. </div>
复制代码

标签为 class="slidebarup" 的为上一个    标签为  class="slidebardown"  的为下一个  

3、当 slideshow的内容展示不全或 不在一个区域时 我们提供了 更多内容的展示方法  在需要展示的地方增加如下代码
  1. <div class="slideother">
  2. <span>可以是任何内容</span>
  3. </div>
复制代码

同时支持多个slideother   如下代码
  1. <div class="slideother">
  2. <span>内容一</span>
  3. </div>

  5. <div class="slideother">
  6. <span>内容二</span>
  7. </div>
复制代码

4、如何控制幻灯片播放的速度
      在<div class="slidebox" >增加参数  如下代码  其中 timestep="3000"  为毫秒
  1. <div class="slidebox" timestep="3000">
复制代码

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




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

  1. <div class="slidebox" slidenum="3" slidestep="1">
复制代码

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


以上为幻灯片的所有功能

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

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

效果一




实现代码
  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>
复制代码
效果二





实现代码
  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>
复制代码
效果三




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

效果四



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

效果五



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

效果六


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

效果七


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

效果八


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

效果九



实现代码
  1. <div class="slidebox">

  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>
复制代码

效果十



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

大家可以参照上面提供的十套代码 仔细研究一下。

百变幻灯 随你而变

感谢大家

回复

使用道具 举报

test_01d
沙发
发表于 10-2-2010 17:45:03 | 只看该作者
回复 Fenlix 的帖子

我顶
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册

本版积分规则

快速回复 返回顶部 返回列表