制作风格——百变幻灯片，完全DIY（高级教程）

2019-04-15 16:23发布

站内文章 / PIC单片机
12367 0 1526
在DIY时如何调用幻灯片，幻灯片该如何制作，这一讲我们来教大家如何制作幻灯片 

请跟随教程从头到尾仔细阅读，你将收获不小

第一步制作幻灯片：后台--》门户--》模块模板

点击 添加按扭 如下图所示

1.gif

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

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

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

2.gif

接下来 我们输入代码 

首先在代码框里面输入
复制代码 其中的div可以是任意标签，如table，span等，我们这里以div为例

此处的标签必须加一个class="slidebox"的属性 如下面代码所示 ，只有包含在有class="slidebox"属性的标签里面的内容才是幻灯片 ，切记
如下图所示

3.gif

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

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





复制代码
接下来我们来增加“滑动”、“点击”的代码   

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







复制代码 以上代码已完成幻灯片的框架 接下来我们为幻灯片添加数据代码 

在
代码中间插入图片显示代码

如下代码 
复制代码 其中{pic} 为图片地址变量， {picwidth}为图片宽度变量，{picheight}为图片高度变量

接下来为图片增加循环代码 如下代码

  1. [loop]
  2.  
  3. [/loop]
复制代码 完整代码如下



  3. [loop]
  4.  
  5. [/loop]



    • 复制代码 接下来 为滑动条增加数字 

    在
    中增加娄字变量 如下代码

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

    最后增加脚本代码 如下  以下代码放在模块代码的最后

    复制代码
    此时一个简单的幻灯片就完成了 ，幻灯片的完整代码 如下



    3. [loop]
    4.  
    5. [/loop]


  •  
  • [loop1]{currentorder}[/loop1]



    • 复制代码
    如下图所示 

    5.gif

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

    如下图所示 调用

    61.gif


    显示效果

    71.gif


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

    下面讲解一些高级参数 

    1、滑动条如何控制让用户点击还是滑动  
          在
    中加入参数  （鼠标滑动）mevent="mouseover"  或   （鼠标点击）mevent="click"   
          完整代码如下  以下代码实现 点击后变换
    1.  
    2. [loop1]{currentorder}[/loop1]
    复制代码
    2、如何实现上一个 下一个的效果 如下图样式 

    8.gif

        
        添加如下代码即可实现

    2. up



  • down
    • 复制代码 标签为 class="slidebarup" 的为上一个    标签为  class="slidebardown"  的为下一个  

    3、当 slideshow的内容展示不全或 不在一个区域时 我们提供了 更多内容的展示方法  在需要展示的地方增加如下代码

    2.         可以是任何内容
    复制代码 同时支持多个slideother   如下代码


    2.         内容一



    6.         内容二
    复制代码 4、如何控制幻灯片播放的速度 
          在
    增加参数  如下代码  其中 timestep="3000"  为毫秒 
    复制代码
    5、如何实现 一次显示多个图片，每次切换多个 如下图样式

    9.gif

        
            在

    热门文章