DZ（Discuz）百变幻灯片，完全DIY
请跟随教程从头到尾仔细阅读，你将收获不小
第一步制作幻灯片：后台--》门户--》模块模板
点击 添加按扭 如下图所示
此处可以可以选择不同的模块分类如 附件类、帖子类、文章类、图片类等等 可以根据你的喜好选择不同的模块分类
下面我们以文章类为例来讲解，选择文章分类 点提交 如下图所示 ，为新建的模块起个名字 如 “百变幻灯片” 

把代码框里面的内容全部删除
接下来 我们输入代码

首先在代码框里面输入
1 <div class="slidebox"></div>
复制代码
其中的div可以是任意标签，如table，span等，我们这里以div为例
此处的标签必须加一个class="slidebox"的属性 如下面代码所示 ，只有包含在有class="slidebox"属性的标签里面的内容才是幻灯片 ，切记
如下图所示
接下来，我们增加幻灯代码  下面代码用来实现图片（或内容）的显示作用 属性必须为class="slideshow"的标签
2 <div class="slideshow"></div>
复制代码
上面的代码必须放在 class="slidebox"的属性的标签里面 上面已经讲过 ，完整代码如下
3 <div class="slidebox">
4
5 <div class="slideshow"></div>
6
7 </div>
复制代码

接下来我们来增加“滑动”、“点击”的代码 
8 <div class="slidebar"></div>
复制代码

上面的代码必须放在 class="slidebox"的属性的标签里面 上面已经讲过 ，完整代码如下
9 <div class="slidebox"><!--幻灯片开始-->
10
11 <div class="slideshow"> </div><!--图片展示-->
12
13 <div class="slidebar"> </div><!--幻灯片控制展示-->
14
15 </div><!--幻灯片结束-->
复制代码
以上代码已完成幻灯片的框架 接下来我们为幻灯片添加数据代码

在<div class="slideshow"> </div> 代码中间插入图片显示代码

如下代码
16 <div class="slideshow"><img src="{pic}" width="{picwidth}" height="{picheight}" /> </div><!--图片展示-->
复制代码
其中{pic} 为图片地址变量， {picwidth}为图片宽度变量，{picheight}为图片高度变量


接下来为图片增加循环代码 如下代码
17 [loop]
18 <img src="{pic}" width="{picwidth}" height="{picheight}" />
19 [/loop]
复制代码
完整代码如下
20 <div class="slidebox"><!--幻灯片开始-->
21 <div class="slideshow">
22 [loop]
23 <img src="{pic}" width="{picwidth}" height="{picheight}" />
24 [/loop]
25 </div>
26 <!--图片展示-->
27 <div class="slidebar"> </div><!--幻灯片控制展示-->
28 </div><!--幻灯片结束-->
复制代码
接下来 为滑动条增加数字

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

最后增加脚本代码 如下  以下代码放在模块代码的最后
32 <script type="text/javascript">
33 runslideshow();
34 </script>
复制代码

此时一个简单的幻灯片就完成了 ，幻灯片的完整代码 如下
35 <div class="slidebox"><!--幻灯片开始-->
36 <div class="slideshow">
37 [loop]
38 <img src="{pic}" width="{picwidth}" height="{picheight}" />
39 [/loop]
40 </div>
41 <!--图片展示-->
42 <div class="slidebar">
43 [loop1]<span>{currentorder}</span>[/loop1]
44 </div><!--幻灯片控制展示-->
45 </div><!--幻灯片结束-->
46
47 <script type="text/javascript">
48 runslideshow();
49 </script>
复制代码

如下图所示


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

如下图所示 调用



显示效果



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

下面讲解一些高级参数

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

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


 
    添加如下代码即可实现
53 <div class="slidebarup">
54 <span>up</span>
55 </div>
56
57 <div class="slidebardown">
58 <span>down</span>
59 </div>
复制代码
标签为 class="slidebarup" 的为上一个    标签为  class="slidebardown"  的为下一个 

3、当 slideshow的内容展示不全或 不在一个区域时 我们提供了 更多内容的展示方法  在需要展示的地方增加如下代码
60 <div class="slideother">
61         <span>可以是任何内容</span>
62 </div>
复制代码
同时支持多个slideother  如下代码
63 <div class="slideother">
64         <span>内容一</span>
65 </div>
66
67 <div class="slideother">
68         <span>内容二</span>
69 </div>
复制代码
4、如何控制幻灯片播放的速度
      在<div class="slidebox" >增加参数  如下代码  其中 timestep="3000"  为毫秒
70 <div class="slidebox" timestep="3000">
复制代码

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


 
        在<div class="slidebox" >增加参数  如下代码
71 <div class="slidebox"  slidenum="3" slidestep="1">
复制代码
其中  slidenum="3"  表示显示数量  ， slidestep="1" 表示每点击一次左右按扭 移动的次数


以上为幻灯片的所有功能

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

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

效果一
javascript幻灯片


实现代码
72 <div class="slidebox">
73 <div class="slideshow">
74                         [loop]
75                     <a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a>
76                         [/loop]
77 </div>
78                 <div class="bignews_btns">
79                     <div class="btns slidebar">
80                                     [loop1]
81                         <em></em>
82                                                 [/loop1]
83                           </div>
84                     <div class="desc slideother">
85 [loop2]
86                     <a href="{url}"{target}>{title}</a>
87 [/loop2]
88 </div>
89                       </div>
90 </div>
91 <script type="text/javascript">
92 runslideshow();
93 </script>
复制代码

效果二



实现代码
94 <div class="slidebox" timestep="3000">
95                   <div class="thumb on slideshow" >
96                         [loop]
97               <span>
98                             <a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。