在DIY时如何调用
幻灯片，幻灯片该如何制作，这一讲我们来教大家如何制作幻灯片
请跟随教程从头到尾仔细阅读，你将收获不小
第一步制作幻灯片：后台--》门户--》模块模板
点击 添加按扭 如下图所示
此处可以可以选择不同的模块分类如 附件类、帖子类、文章类、图片类等等 可以根据你的喜好选择不同的模块分类
下面我们以文章类为例来讲解，选择文章分类 点提交 如下图所示 ，为新建的模块起个名字 如 “百变幻灯片”
把代码框里面的内容全部删除
接下来 我们输入代码
首先在代码框里面输入
- <div class="slidebox"></div>
其中的div可以是
任意标签，如table，span等，我们这里以div为例
此处的标签必须加一个
class="slidebox"的属性 如下面代码所示 ，
只有包含在有class="slidebox"属性的标签里面的内容才是幻灯片 ，切记
如下图所示
接下来，我们增加幻灯代码 下面代码用来实现图片（或内容）的显示作用
属性必须为class="slideshow"的标签- <div class="slideshow"></div>
上面的代码
必须放在 class="slidebox"的属性的标签里面 上面已经讲过 ，完整代码如下
- <div class="slidebox">
- <div class="slideshow"></div>
- </div>
接下来我们来增加“
滑动”、“
点击”的代码
- <div class="slidebar"></div>
上面的代码必须放在 class="slidebox"的属性的标签里面 上面已经讲过 ，完整代码如下
- <div class="slidebox"><!--幻灯片开始-->
- <div class="slideshow"> </div><!--图片展示-->
- <div class="slidebar"> </div><!--幻灯片控制展示-->
- </div><!--幻灯片结束-->
以上代码已完成幻灯片的框架 接下来我们为幻灯片添加数据代码
在<div class="slideshow"> </div> 代码中间插入图片显示代码
如下代码
- <div class="slideshow"><img src="{pic}" width="{picwidth}" height="{picheight}" /> </div><!--图片展示-->
其中{pic} 为图片地址变量， {picwidth}为图片宽度变量，{picheight}为图片高度变量
接下来为图片增加
循环代码 如下代码
- [loop]
- <img src="{pic}" width="{picwidth}" height="{picheight}" />
- [/loop]
完整代码如下
- <div class="slidebox"><!--幻灯片开始-->
- <div class="slideshow">
- [loop]
- <img src="{pic}" width="{picwidth}" height="{picheight}" />
- [/loop]
- </div>
- <!--图片展示-->
- <div class="slidebar"> </div><!--幻灯片控制展示-->
- </div><!--幻灯片结束-->
接下来 为滑动条增加数字
在
<div class="slidebar"> </div>中增加娄字变量 如下代码
- <div class="slidebar">
- [loop1]<span>{currentorder}</span>[/loop1]
- </div>
其中
{currentorder} 是当前显示的顺序数字 ,其中[loop1]...[/loop1] 为循环，你可能注意到了，这里用了[loop1] ,如果一个模块中需要
多次循环时就可以使用 loop1、loop2、loop3 以此类推 来实现多处循环的目的
最后增加脚本代码 如下 以下代码放在模块代码的最后- <script type="text/javascript">
- runslideshow();
- </script>
此时一个简单的幻灯片就完成了 ，
幻灯片的完整代码 如下
- <div class="slidebox"><!--幻灯片开始-->
- <div class="slideshow">
- [loop]
- <img src="{pic}" width="{picwidth}" height="{picheight}" />
- [/loop]
- </div>
- <!--图片展示-->
- <div class="slidebar">
- [loop1]<span>{currentorder}</span>[/loop1]
- </div><!--幻灯片控制展示-->
- </div><!--幻灯片结束-->
- <script type="text/javascript">
- runslideshow();
- </script>
如下图所示
