请选择 进入手机版 | 继续访问电脑版

制作DIY幻灯片

admin 发表于 2016-7-3 16:32:10 | 显示全部楼层 |阅读模式 [复制链接]
0 1215
第一步制作幻灯片:后台--》门户--》模块模板

此处可以可以选择不同的模块分类如 附件类、帖子类、文章类、图片类等等 可以根据你的喜好选择不同的模块分类

下面我们以文章类为例来讲解,选择文章分类 点提交 如下图所示 ,为新建的模块起个名字 如 “百变幻灯片”  

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

接下来 我们输入代码

首先在代码框里面输入
  1. <div class="slidebox"></div>
复制代码

其中的div可以是任意标签,如table,span等,我们这里以div为例

此处的标签必须加一个class="slidebox"的属性 如下面代码所示 ,只有包含在有class="slidebox"属性的标签里面的内容才是幻灯片 ,切记
接下来,我们增加幻灯代码  下面代码用来实现图片(或内容)的显示作用 属性必须为class="slideshow"的标签
  1. <div class="slideshow"></div>
复制代码
上面的代码必须放在 class="slidebox"的属性的标签里面 上面已经讲过 ,完整代码如下
  1. <div class="slidebox">
  2. <div class="slideshow"></div>
  3. </div>
复制代码

接下来我们来增加“滑动”、“点击”的代码   
  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. [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><!--幻灯片结束-->
复制代码

接下来 为滑动条增加数字

<div class="slidebar"> </div>中增加娄字变量 如下代码
  1. <div class="slidebar">
  2. [loop1]<span>{currentorder}</span>[/loop1]
  3. </div>
复制代码

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

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

此时一个简单的幻灯片就完成了 ,幻灯片的完整代码 如下
  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>
复制代码

至此简易幻灯片就完成了,需要你通过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" 表示每点击一次左右按扭 移动的次数


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

加入我们,

发现科技可以让生活更美好...

立即注册

如果您已拥有本站账户,则可

推荐阅读

Archiver|手机版|小黑屋| 加田模板基地

Templated By 加田小店  粤IP备案号:BGJ15464X   穗公网监备案证第44010650000002号  中国电子认证联盟实名认证

Powered by Discuz! X3.4

© 2001-2016 Comsenz Inc.

返回顶部 返回列表