模板制作修改 Discuz各类幻灯片的制作方法 - 完全支持DIY

  [复制链接]
ARCHY明星会员实名认证 发表于 2012-8-30 11:34:56 [模板制作修改] 显示全部楼层 |阅读模式 上一主题 下一主题
discuz使用视频教程

马上注册,一起探讨正确快速的建站方法

您需要 登录 才可以下载或查看,没有帐号?快速注册

x
幻灯片不仅可以展示图片的完美效果,吸引视觉感,而且可以展示更多的信息,留住用户。通常的方法是使用JQ等代码来做,但容易导致JQ和默认的JS冲突(jQuery和Discuz js文件冲突解决办法),今天在站帮网分享使用discuz默认的DIY来实现调用幻灯片,以及各种不同的效果如何制作幻灯片。

一、幻灯片的制作流程:

1、制作幻灯片DIY模块:后台--》门户--》模块模板,点击 添加按扭,如下图所示:

后台--》门户--》模块模板,点击 添加按扭

后台--》门户--》模块模板,点击 添加按扭


此处可以可以选择不同的模块分类,如:附件类、帖子类、文章类、图片类等等,可以根据你的需要选择不同的模块分类。

下面我们以文章类为例来讲解,选择文章分类,点提交,如下图所示。为新建的模块起个名字 如 “百变幻灯片” ,把代码框里面的内容全部删除 。

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

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


1.1、我们输入代码 ,首先在代码框里面输入:
  1. <div class="slidebox"></div>
复制代码
其中的div可以是任意标签,如table,span等,我们这里以div为例。此处的标签必须加一个class="slidebox"的属性,如下面代码所示 ,只有包含在有class="slidebox"属性的标签里面的内容才是幻灯片 ,切记。如下图所示:

此处的标签必须加一个class="slidebox"的属性

此处的标签必须加一个class="slidebox"的属性


1.2、我们增加幻灯代码,下面代码用来实现图片(或内容)的显示作用,属性必须为class="slideshow"的标签
  1. <div class="slideshow"></div>
复制代码
上面的代码必须放在 class="slidebox"的属性的标签里面,上面已经讲过 ,完整代码如下:
  1. <div class="slidebox">

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

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

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

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

  4. </div><!--幻灯片结束-->
复制代码
以上代码已完成幻灯片的框架,接下来我们为幻灯片添加数据代码 ,在<div class="slideshow"> </div> 代码中间插入图片显示代码,如下代码:
  1. <div class="slideshow"><img src="{pic}" width="{picwidth}" height="{picheight}" /> </div><!--图片展示-->
复制代码
其中{pic} 为图片地址变量, {picwidth}为图片宽度变量,{picheight}为图片高度变量

1.4、为图片增加循环代码,如下代码:
  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><!--幻灯片结束-->
复制代码
1.5、为滑动条增加数字

<div class="slidebar"> </div>中增加娄字变量,如下代码:
  1. <div class="slidebar">
  2. [loop1]<span>{currentorder}</span>[/loop1]
  3. </div>
复制代码
其中{currentorder} 是当前显示的顺序数字  ,其中[loop1]...[/loop1] 为循环,你可能注意到了,这里用了[loop1],如果一个模块中需要多次循环时就可以使用 loop1、loop2、loop3 以此类推来实现多处循环的目的 。

1.6、增加脚本代码, 以下代码放在模块代码的最后:
  1. <script type="text/javascript">
  2. runslideshow();
  3. </script>
复制代码
此时一个简单的幻灯片模块就完成了 ,幻灯片DIY模块的完整代码如下:
  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. <script type="text/javascript">
  13. runslideshow();
  14. </script>
复制代码
代码如下图所示:

幻灯片的完整代码

幻灯片的完整代码


2、此时我们就可以通过前台DIY调用做好的幻灯片模块了 ,如下图调用所示:

幻灯片DIY调用

幻灯片DIY调用


3、显示效果如下图所示:

简单的幻灯片效果

简单的幻灯片效果


至此简易幻灯片就完成了,需要你通过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>

  4. <div class="slidebardown">
  5. <span>down</span>
  6. </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>

  4. <div class="slideother">
  5.         <span>内容二</span>
  6. </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做出各类幻灯片效果。

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

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

1、效果一:

幻灯片效果一

幻灯片效果一


参考频道模板:Discuz! X2.5门户模板下载(4月17号更新)
http://bbs.zb7.com/thread-1205-1-1.html

DIY模块实现代码
  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>
复制代码
2、效果二

幻灯片效果二

幻灯片效果二


参考频道模板:Discuz! X2.5门户模板下载(4月17号更新)
http://bbs.zb7.com/thread-1205-1-1.html

DIY模块实现代码
  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>
复制代码
3、效果三

幻灯片效果三

幻灯片效果三


参考频道模板:Discuz! X2.5门户模板下载(4月17号更新)
http://bbs.zb7.com/thread-1205-1-1.html

DIY模块实现代码
  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>
复制代码
4、效果四

幻灯片效果四

幻灯片效果四


参考频道模板:Discuz! X2.5门户模板下载(4月17号更新)
http://bbs.zb7.com/thread-1205-1-1.html

DIY模块实现代码
  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>
复制代码
5、效果五

幻灯片效果五

幻灯片效果五


参考频道模板:Discuz x2.5婚嫁类门户模板发布下载(4月17号更新)
http://bbs.zb7.com/thread-1206-1-1.html

DIY模块实现代码
  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>
复制代码
6、效果六

幻灯片效果六

幻灯片效果六


参考频道模板:Discuz x2.5 美食频道模板发布(4月17号更新)
http://bbs.zb7.com/thread-1212-1-1.html

DIY模块实现代码
  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>
复制代码
7、效果七

幻灯片效果七

幻灯片效果七


参考频道模板:Discuz x2.5 美食频道模板发布(4月17号更新)
http://bbs.zb7.com/thread-1212-1-1.html

DIY模块实现代码
  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>
复制代码
8、效果八

幻灯片效果八

幻灯片效果八


参考频道模板:Discuz x2.5 亲子频道模板发布(4月17号更新)
http://bbs.zb7.com/thread-1214-1-1.html

DIY模块实现代码
  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>
复制代码
9、效果九

幻灯片效果九

幻灯片效果九


参考频道模板:Discuz x2.5 汽车频道门户模板下载(4月17号更新)
http://bbs.zb7.com/thread-1215-1-1.html

DIY模块实现代码
  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="btn">
  8.                 <em class="slidebarup"><img src="template/default/portal/car/images/bignews_btn_left.gif" /></em>
  9.                <em class="slidebar">[loop1]<span><img src="template/default/portal/car/images/empty_img.gif" width="8" height="8"/></span>[/loop1]</em>
  10.                 <em class="slidebardown"><img src="template/default/portal/car/images/bignews_btn_right.gif" /></em>
  11.             </div>
  12.             <div class="bignews_title slideother">
  13.                         [loop2]
  14.                  <em><a href="{url}"{target}>{title}</a></em>
  15.                         [/loop2]
  16.             </div>
  17. </div>
  18. <script type="text/javascript">
  19. runslideshow();
  20. </script>
复制代码
10、效果十

幻灯片效果十

幻灯片效果十


参考频道模板:Discuz x2.5 家居类门户模板(4月17号更新)
http://bbs.zb7.com/thread-1207-1-1.html

DIY模块实现代码
  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>
复制代码
大家可以参照上面提供的十套代码,仔细研究一下,百变幻灯 随你而变。想要更好的制作Discuz模板请看:Discuz模板的制作方法
参与人数 1帮币 +3 收起 理由
雨不停下-国祥 + 3 很给力!

查看全部评分总评分 : 帮币 +3





上一篇:复制数据库配置其他站点导致原站点云平台不能使用的解决方法
下一篇:Discuz X2.5 取消登陆密码错误15分钟限制的方法

大神点评77

投机 发表于 2012-8-30 12:48:37 [模板制作修改] 显示全部楼层
怎么和官方的是一个样啊
夜未央 发表于 2012-8-30 14:13:52 [模板制作修改] 显示全部楼层
留着备用
clswang 发表于 2012-8-30 16:26:23 [模板制作修改] 显示全部楼层
来支持下了啊
www.huaguow.com www.hanfanba.com www.shuyangweb.com www.qiwenguan.cn cygs.org
小亮仔明星会员实名认证 发表于 2012-9-3 09:52:25 [模板制作修改] 显示全部楼层
系统自带的js吗
lx3gp 发表于 2012-9-25 00:48:15 [模板制作修改] 显示全部楼层
办法很实用,收藏之~~!
是我非我 发表于 2012-10-16 18:24:01 [模板制作修改] 显示全部楼层
这个不错
陈年佳酿 发表于 2012-10-18 16:29:25 [模板制作修改] 显示全部楼层
LZ你太帅了,要的就是这个
tushiner 发表于 2012-10-23 17:34:30 [模板制作修改] 显示全部楼层
小亮仔 发表于 2012-9-3 09:52
系统自带的js吗

是DX系统自带的js,楼主在原文中明确提出要配合CSS使用。
皮卡庆~~ 发表于 2012-11-4 22:05:09 [模板制作修改] 显示全部楼层
做的好高端
GG--bone 发表于 2012-11-7 21:51:23 [模板制作修改] 显示全部楼层
可不可以搞到win8效果?
FusioN 发表于 2012-11-14 12:52:51 [模板制作修改] 显示全部楼层
十分感谢
帮帮网 发表于 2012-11-14 15:22:17 [模板制作修改] 显示全部楼层
学习学习
期待 发表于 2012-12-13 17:33:22 [模板制作修改] 显示全部楼层
解析很透彻!很好的教程,推荐!!!
幸福一家子 发表于 2012-12-17 10:17:24 [模板制作修改] 显示全部楼层
这个不错,经典代码,
您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

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