推荐应用
百变幻灯片,完全DIY(高级教程)
发布于 2013-04-20
在DIY时如何调用幻灯片,幻灯片该如何制作,这一讲我们来教大家如何制作幻灯片
第一步制作幻灯片:后台--》门户--》模块模板
点击 添加按扭 如下图所示
此处可以可以选择不同的模块分类如 附件类、帖子类、文章类、图片类等等 可以根据你的喜好选择不同的模块分类
下面我们以文章类为例来讲解,选择文章分类 点提交 如下图所示 ,为新建的模块起个名字 如 “百变幻灯片”
把代码框里面的内容全部删除
接下来 我们输入代码
首先在代码框里面输入
其中的div可以是任意标签,如table,span等,我们这里以div为例
此处的标签必须加一个class="slidebox"的属性 如下面代码所示 ,只有包含在有class="slidebox"属性的标签里面的内容才是幻灯片 ,切记
如下图所示
接下来,我们增加幻灯代码 下面代码用来实现图片(或内容)的显示作用 属性必须为class="slideshow"的标签
上面的代码必须放在 class="slidebox"的属性的标签里面 上面已经讲过 ,完整代码如下
接下来我们来增加“滑动”、“点击”的代码
上面的代码必须放在 class="slidebox"的属性的标签里面 上面已经讲过 ,完整代码如下
以上代码已完成幻灯片的框架 接下来我们为幻灯片添加数据代码
在
代码中间插入图片显示代码
如下代码
其中{pic} 为图片地址变量, {picwidth}为图片宽度变量,{picheight}为图片高度变量
接下来为图片增加循环代码 如下代码
[loop]
[/loop]
完整代码如下
[loop]
[/loop]
接下来 为滑动条增加数字
在
中增加娄字变量 如下代码
[loop1]{currentorder}[/loop1]
其中{currentorder} 是当前显示的顺序数字 ,其中[loop1]...[/loop1] 为循环,你可能注意到了,这里用了[loop1] ,如果一个模块中需要多次循环时就可以使用 loop1、loop2、loop3 以此类推 来实现多处循环的目的
最后增加脚本代码 如下 以下代码放在模块代码的最后
此时一个简单的幻灯片就完成了 ,幻灯片的完整代码 如下
[loop]
[/loop]
[loop1]{currentorder}[/loop1]
如下图所示
此时我们就可以通过前台DIY调用了
如下图所示 调用
显示效果
至此简易幻灯片就完成了,需要你通过CSS样式来配合美化一下
下面讲解一些高级参数
1、滑动条如何控制让用户点击还是滑动
在 中加入参数 (鼠标滑动)mevent="mouseover" 或 (鼠标点击)mevent="click"
完整代码如下 以下代码实现 点击后变换
[loop1]{currentorder}[/loop1]
2、如何实现上一个 下一个的效果 如下图样式
添加如下代码即可实现
up
down
标签为 class="slidebarup" 的为上一个 标签为 class="slidebardown" 的为下一个
3、当 slideshow的内容展示不全或 不在一个区域时 我们提供了 更多内容的展示方法 在需要展示的地方增加如下代码
可以是任何内容
同时支持多个slideother 如下代码
内容一
内容二
4、如何控制幻灯片播放的速度
在增加参数 如下代码 其中 timestep="3000" 为毫秒
5、如何实现 一次显示多个图片,每次切换多个 如下图样式
在增加参数 如下代码
其中 slidenum="3" 表示显示数量 , slidestep="1" 表示每点击一次左右按扭 移动的次数
以上为幻灯片的所有功能
下面提供演示站点中门户及频道所用到的幻灯片代码 (大家可以参照所提供的代码制作出炫丽的幻灯片)
以下所示效果都需要CSS配合
效果一
实现代码
[loop]
[/loop]
[loop1]
[/loop1]
[loop2]
{title}
[/loop2]
效果二
实现代码
[loop]
查看
[/loop]
[loop1]
{title}
{summary}
[/loop1]
[loop2]
{dateline}
[/loop2]
[loop3]{currentorder}[/loop3]
效果三
实现代码
效果四
实现代码
美食大赏
[loop]
[/loop]
[loop1]
{title}
[/loop1]
效果五
实现代码
[loop]
[/loop]
[loop1]
{title}
[/loop1]
[loop2]
{summary}
[/loop2]
效果六
实现代码
[loop][/loop]
[loop1]
{currentorder}
[/loop1]
效果七
实现代码
[loop][/loop]
[loop1]
[/loop1]
[loop2]
{title}
{summary}
[/loop2]
效果八
实现代码
[loop]
[/loop]
[loop1]
{title}
{summary}
[/loop1]
效果九
实现代码
[loop]
[/loop]
[loop1][/loop1]
[loop2]
{title}
[/loop2]
效果十
实现代码
[loop]
[/loop]
[loop1]
{currentorder}
[/loop1]
[loop2]
{title}
{summary}
[/loop2]
大家可以参照上面提供的十套代码 仔细研究一下。
百变幻灯 随你而变
感谢大家
全方位立体式讲解DIY技巧集锦(不断更新)
全方位立体式讲解DIY技巧集锦第一弹
全方位立体式讲解DIY技巧集锦第二弹
Discuz各类幻灯片的制作方法 - 完全支持DIY
DIY 参数详解之[index=x]
请跟随教程从头到尾仔细阅读,你将收获不小
第一步制作幻灯片:后台--》门户--》模块模板
点击 添加按扭 如下图所示
此处可以可以选择不同的模块分类如 附件类、帖子类、文章类、图片类等等 可以根据你的喜好选择不同的模块分类
下面我们以文章类为例来讲解,选择文章分类 点提交 如下图所示 ,为新建的模块起个名字 如 “百变幻灯片”
把代码框里面的内容全部删除
接下来 我们输入代码
首先在代码框里面输入
其中的div可以是任意标签,如table,span等,我们这里以div为例
此处的标签必须加一个class="slidebox"的属性 如下面代码所示 ,只有包含在有class="slidebox"属性的标签里面的内容才是幻灯片 ,切记
如下图所示
接下来,我们增加幻灯代码 下面代码用来实现图片(或内容)的显示作用 属性必须为class="slideshow"的标签
上面的代码必须放在 class="slidebox"的属性的标签里面 上面已经讲过 ,完整代码如下
接下来我们来增加“滑动”、“点击”的代码
上面的代码必须放在 class="slidebox"的属性的标签里面 上面已经讲过 ,完整代码如下
以上代码已完成幻灯片的框架 接下来我们为幻灯片添加数据代码
在
代码中间插入图片显示代码
如下代码
其中{pic} 为图片地址变量, {picwidth}为图片宽度变量,{picheight}为图片高度变量
接下来为图片增加循环代码 如下代码
[loop]
[/loop]
完整代码如下
[loop]
[/loop]
接下来 为滑动条增加数字
在
中增加娄字变量 如下代码
[loop1]{currentorder}[/loop1]
其中{currentorder} 是当前显示的顺序数字 ,其中[loop1]...[/loop1] 为循环,你可能注意到了,这里用了[loop1] ,如果一个模块中需要多次循环时就可以使用 loop1、loop2、loop3 以此类推 来实现多处循环的目的
最后增加脚本代码 如下 以下代码放在模块代码的最后
此时一个简单的幻灯片就完成了 ,幻灯片的完整代码 如下
[loop]
[/loop]
[loop1]{currentorder}[/loop1]
如下图所示
此时我们就可以通过前台DIY调用了
如下图所示 调用
显示效果
至此简易幻灯片就完成了,需要你通过CSS样式来配合美化一下
下面讲解一些高级参数
1、滑动条如何控制让用户点击还是滑动
在 中加入参数 (鼠标滑动)mevent="mouseover" 或 (鼠标点击)mevent="click"
完整代码如下 以下代码实现 点击后变换
[loop1]{currentorder}[/loop1]
2、如何实现上一个 下一个的效果 如下图样式
添加如下代码即可实现
up
down
标签为 class="slidebarup" 的为上一个 标签为 class="slidebardown" 的为下一个
3、当 slideshow的内容展示不全或 不在一个区域时 我们提供了 更多内容的展示方法 在需要展示的地方增加如下代码
可以是任何内容
同时支持多个slideother 如下代码
内容一
内容二
4、如何控制幻灯片播放的速度
在增加参数 如下代码 其中 timestep="3000" 为毫秒
5、如何实现 一次显示多个图片,每次切换多个 如下图样式
在增加参数 如下代码
其中 slidenum="3" 表示显示数量 , slidestep="1" 表示每点击一次左右按扭 移动的次数
以上为幻灯片的所有功能
下面提供演示站点中门户及频道所用到的幻灯片代码 (大家可以参照所提供的代码制作出炫丽的幻灯片)
以下所示效果都需要CSS配合
效果一
实现代码
[loop]
[/loop]
[loop1]
[/loop1]
[loop2]
{title}
[/loop2]
效果二
实现代码
[loop]
查看
[/loop]
[loop1]
{title}
{summary}
[/loop1]
[loop2]
{dateline}
[/loop2]
[loop3]{currentorder}[/loop3]
效果三
实现代码
- {title}
[loop]
[/loop]
效果四
实现代码
美食大赏
[loop]
[/loop]
[loop1]
{title}
[/loop1]
效果五
实现代码
[loop]
[/loop]
[loop1]
{title}
[/loop1]
[loop2]
{summary}
[/loop2]
效果六
实现代码
[loop][/loop]
[loop1]
{currentorder}
[/loop1]
效果七
实现代码
[loop][/loop]
[loop1]
[/loop1]
[loop2]
{title}
{summary}
[/loop2]
效果八
实现代码
[loop]
[/loop]
[loop1]
{title}
{summary}
[/loop1]
效果九
实现代码
[loop]
[/loop]
[loop1][/loop1]
[loop2]
{title}
[/loop2]
效果十
实现代码
[loop]
[/loop]
[loop1]
{currentorder}
[/loop1]
[loop2]
{title}
{summary}
[/loop2]
大家可以参照上面提供的十套代码 仔细研究一下。
百变幻灯 随你而变
感谢大家
全方位立体式讲解DIY技巧集锦(不断更新)
全方位立体式讲解DIY技巧集锦第一弹
全方位立体式讲解DIY技巧集锦第二弹
Discuz各类幻灯片的制作方法 - 完全支持DIY
DIY 参数详解之[index=x]