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

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

一、幻灯片的制作流程：

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



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

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



1.1、我们输入代码 ，首先在代码框里面输入：

其中的div可以是任意标签，如table，span等，我们这里以div为例。此处的标签必须加一个class="slidebox"的属性，如下面代码所示 ，只有包含在有class="slidebox"属性的标签里面的内容才是幻灯片 ，切记。如下图所示：



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

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

1.3、我们来增加“滑动”、“点击”的代码

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

以上代码已完成幻灯片的框架，接下来我们为幻灯片添加数据代码 ，在 代码中间插入图片显示代码，如下代码：

其中{pic} 为图片地址变量， {picwidth}为图片宽度变量，{picheight}为图片高度变量

1.4、为图片增加循环代码，如下代码：[loop]

[/loop]完整代码如下：

[loop]

[/loop]

1.5、为滑动条增加数字

在

中增加娄字变量，如下代码：

[loop1]{currentorder}[/loop1]

其中{currentorder} 是当前显示的顺序数字 ,其中[loop1]...[/loop1] 为循环，你可能注意到了，这里用了[loop1]，如果一个模块中需要多次循环时就可以使用 loop1、loop2、loop3 以此类推来实现多处循环的目的 。

1.6、增加脚本代码， 以下代码放在模块代码的最后：此时一个简单的幻灯片模块就完成了 ，幻灯片DIY模块的完整代码如下：

[loop]

[/loop]

[loop1]{currentorder}[/loop1]

代码如下图所示：



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



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



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

二、下面讲解一些高级参数

1、滑动条如何控制让用户点击还是滑动

在