广
告

Discuz教程

  • 帝国cms教程
  • 织梦CMS教程
  • PHP CMS教程
  • ECSHOP教程
  • WordPress教程
  • Discuz教程

    • CMS学习

    完全DIY的discuzX百变幻灯片

    2018-04-02 20:45:55 次阅读 稿源：互联网
    广告
    在DIY时如何调用幻灯片，幻灯片该如何制作，这一讲我们来教大家如何制作幻灯片

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



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

    点击 添加按扭 如下图所示

    1.gif



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

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

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

    2.gif



    接下来 我们输入代码

    首先在代码框里面输入
    1. <div class="slidebox"></div>
    复制代码
    其中的div可以是任意标签，如table，span等，我们这里以div为例

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

    3.gif



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

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

    1. <div class="slidebox">

    3. <div class="slideshow"></div>

    5. </div>
    复制代码

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

    1. <div class="slidebar"></div>
    复制代码

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

    1. <div class="slidebox"><!--幻灯片开始-->

    3. <div class="slideshow"> </div><!--图片展示-->

    5. <div class="slidebar"> </div><!--幻灯片控制展示-->

    7. </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><!--幻灯片结束-->

    13. <script type="text/javascript">
    14. runslideshow();
    15. </script>
    复制代码

    如下图所示

    5.gif

    2010-9-25 12:01 上传
    下载附件 (16.18 KB)

    点赞
    收藏

    一起学吧部分文章转载自互联网，供读者交流和学习，若有涉及作者版权等问题请及时与我们联系，以便更正、删除或按规定办理。感谢所有提供资讯的网站，欢迎各类媒体与一起学吧进行文章共享合作。

    广告
    广告

    最新Discuz教程

    广告

    热点Discuz教程

    © 2018 一起学吧（www.17xb.cc）
    网站介绍 合作联系 寻求报道 投稿指南