Discuz! 官方站

找回密码
立时注册

QQ登录

只需一步,快速早先

探索

百变幻灯片,完全DIY(初级教程)

2013-11-12 11:56| 揭橥者: ARCHY`| 张望: 120902| 评论: 0|原作者: 解语人

摘要: 在DIY时如何调用幻灯片,这一讲我们来教专家如何制作幻灯片 请跟随教程从头到尾仔细阅读,幻灯片该如何制作。
在DIY时如何调用幻灯片,幻灯片该如何制作。

请跟随教程从头到尾仔细阅读,你将得益不小


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

点击 添加按扭 如下图所示

[attach][/attach]

此处可以可以选择不同的模块分类如 附件类、帖子类、文章类、图片类等等 可以遵照你的喜好选择不同的模块分类,足球论坛。

下面我们以文章类为例来疏解,选择文章分类 点提交 如下图所示 。足球论坛。

把代码框内里的形式悉数删除

[attach][/attach]

接下来 我们输出代码

首先在代码框内里输出
复制代码
其中的div可以是随意标签,span等,如table。

此处的标签必需加一个class="slidebox"的属性 如下面代码所示 ,只有蕴涵在有class="slidebox"属性的标签内里的形式才是幻灯片 ,切记
如下图所示

[attach][/attach]

接下来。属性必需为class="slideshow"的标签

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





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

复制代码

下面的代码必需放在 class="slidebox"的属性的标签内里 下面已经讲过 。,足球论坛。







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

代码中间拔出图片显示代码,足球直播论坛

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

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

  1. [loop]

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



  1. [loop]

  2. [/loop]



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

    中增加娄字变量 如下代码


    1. [loop1]{currentorder}[/loop1]
    复制代码 其中{currentorder} 是刻下显示的挨次数字 ,其中[loop1]..足球论坛哪个火。.[/loop1] 为循环,你恐怕注意到了。屡次循环时就可以行使 loop1、loop2、loop3 以此类推,足球吧论坛。 来告终多处循环的主意

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

    复制代码

    此时一个简略单纯的幻灯片就完成了 ,幻灯片的完整代码 如下



    1. [loop]

    2. [/loop]



  • [loop1]{currentorder}[/loop1]



  • 复制代码
    如下图所示

    [attach][/attach]

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

    如下图所示 调用

    [attach][/attach]


    显示效果

    [attach][/attach]


    至此简易幻灯片就完成了。

    下面疏解一些初级参数

    1、滑动条如何负责让用户点击还是滑动
    中出席参数 (鼠标滑动)mevent="mouseover" 或 (鼠标点击)mevent="click" ,足球社区。
    完整代码如下 以下代码告终 点击后变换

    1. [loop1]{currentorder}[/loop1]
    复制代码

    2、如何告终上一个 下一个的效果 如下图样式

    [attach][/attach]


    添加如下代码即可告终

    1. up



  • down
  • 复制代码 标签为 class="slidebarup" 的为上一个 标签为 class="slidebardown" 的为下一个 ,第一足球网论坛。

    3、当 slideshow的形式展示不全或 不在一个区域时 我们提供了 更多形式的展示伎俩 在需要展示的所在增加如下代码,虎扑足球论坛。

    1. 可以是任何形式
    复制代码 同时支持多个slideother 如下代码


    1. 形式一



  • 形式二

  • 复制代码 4、如何负责幻灯片播放的速度
    增加参数 如下代码 其中 timestep="3000" 为毫秒,足球论坛。
    复制代码

    5、如何告终 一次显示多个图片。

    [attach][/attach]


    增加参数 如下代码,百变幻灯片。

    复制代码
    其中 slidenum="3" 表示显示数量 。


    以上为幻灯片的所有功用

    下面提供演示站点中门户及频道所用到的幻灯片代码 (专家可以参照所提供的代码制作出炫丽的幻灯片),十足DIY(初级教程)。

    以下所示效果都需要CSS匹配

    效果一
    [attach][/attach]


    告终代码



    1. [loop]

    2. [/loop]



  • [loop1]

  • [/loop1]


  • [loop2]
  • {title}
  • [/loop2]



  • 复制代码
    效果二

    [attach][/attach]


    告终代码


    1. [loop]


    2. 张望



    3. [/loop]



  • [loop1]

  • {title}


  • {summary}



  • [/loop1]


  • [loop2]
  • {dateline}
  • [/loop2]


  • [loop3]{currentorder}[/loop3]



  • 复制代码
    效果三

    [attach][/attach]


    告终代码









  • 复制代码
    效果四

    [attach][/attach]


    告终代码



    1. 美食大赏

    2. [loop]

    3. [/loop]




  • [loop1]


  • {title}



  • [/loop1]



  • 复制代码
    效果五

    [attach][/attach]


    告终代码



    1. [loop]



  • [/loop]


  • [loop1]

  • {title}

  • [/loop1]


  • [loop2]

  • {summary}


  • [/loop2]


  • 复制代码
    效果六
    [attach][/attach]


    告终代码


    1. [loop][/loop]


    2. [loop1]
    3. {currentorder}
    4. [/loop1]


  • 复制代码
    效果七
    [attach][/attach]

    告终代码


    1. [loop][/loop]


    2. [loop1]

    3. [/loop1]


    4. [loop2]

    5. {title}


  • {summary}

  • [/loop2]


  • 复制代码
    效果八
    [attach][/attach]


    告终代码



    1. [loop]
      [/loop]


  • [loop1]


  • {title}
  • {summary}



  • [/loop1]


  • 复制代码
    效果九

    [attach][/attach]


    告终代码




    1. [loop]

    2. [/loop]



  • [loop1][/loop1]



  • [loop2]
  • {title}
  • [/loop2]


  • 复制代码
    效果十

    [attach][/attach]


    告终代码




    1. [loop]

    2. [/loop]






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




  • [loop2]

  • {title}


  • {summary}



  • [/loop2]




  • 复制代码
    专家可以参照下面提供的十套代码 仔细研究一下。

    百变幻灯 随你而变

    感激专家


    延伸阅读:

    全方位平面式疏解DIY技巧集锦
    thread--1-1.html

    百变幻灯片,完全DIY(初级教程)
    thread--1-1.html

    教你如何把切割好的html页面转换成可供DIY的页面(初级教程)
    thread--1-1.html

    全方位平面式疏解DIY技巧集锦第二弹
    thread--1-1.html

    紧张运营(1)Discuz!X 1.5二级域名设置
    thread--1-1.html

    Discuz! X1.5运营宝典(二)妙用频道功用。
    thread--1-1.html





    相关阅读

    小黑屋|Discuz! 官方站 ( )

    GMT+8, 2020-8-30 22:42

    Powered by Discuz! X3.3

    Copyright ? 2001-2019 Tencent Cloud.,模板创造。

    前往顶部