广

Discuz教程

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

    discuzx自定义diy幻灯片展示方式

    2018-04-02 20:45:59 次阅读 稿源:互联网
    广告
    官方默认的幻灯幻灯片展示样式,也许你想换换样子了。呵呵,下面我就给大家分享下如何自定义自己的diy幻灯模块。
    下面是默认的展示样式:
    1.png
    默认的diy模块代码为:
    <div class="module cl slidebox">
    <ul class="slideshow">
    [loop]
    <li style="width: {picwidth}px; height: {picheight}px;"><a href="{threadurl}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a><span class="title">{threadsubject}</span></li>
    [/loop]
    </ul>
    </div>
    <script type="text/javascript">
    runslideshow();
    </script>


    这段代码的具体含义是:

    <li style="width: {picwidth}px;height: {picheight}px;"><ahref="{threadurl}"{target}><img src="{pic}"width="{picwidth}" height="{picheight}"/></a><span class="title">{threadsubject}</span></li>

    其中,<span class="title">{threadsubject}</span>是底部的半透明标题文字。

    如果说你没有定义图片轮换展示的代码的话,<script type="text/javascript">

    runslideshow();

    </script>

    这段代码会自动生成一个图片轮换展示的切换内容,即当前半透明的数字标识列


    但是有时候我们经常需改变它的展示方式让他变得更有色彩感,例如下面这种展示方式:
    2.png
    这是我修改后的模板代码:
    <style>
    .slidebar em{padding:1px 5px;margin:0 1px;background:#eef1ee;}
    .slidebar em.on{background:#fac730;}
    </style>
    <div class="module cl slidebox" style="position:relative;">
    <ul class="slideshow">
    [loop]
    <li style="width: {picwidth}px; height: {picheight}px;"><a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a><span class="title"></span></li>
    [/loop]
    </ul>
    <div class="btns slidebar" style="position:absolute;bottom:5px;right:4px;">
        [loop1]
            <em>{currentorder}</em>
        [/loop1]
    </div>
    </div>
    <script type="text/javascript">
    runslideshow();
    </script>

    这里我主要自定义了一下sidebar,以sidebar定义calss类的标签,中放置的是我们定时转换的内容。你可以在这里放置标题,缩略图等等,让它们定时切换,也可以放置当前展示顺序的数字代码,我这里自定义的便是数字代码:

    <div class="btns slidebar"style="position:absolute;bottom:5px;right:4px;">


    [loop1]


    <em>{currentorder}</em>


    [/loop1]

    </div>

    重新给他附加了样式:

    .slidebar em{padding:1px 5px;margin:01px;background:#eef1ee;}

    .slidebar em.on{background:#fac730;}

    就可以达到到我想要的效果了。这里我只说这种简单的应用,其中还有几种很多的展示样式。官方的门户频道模板中提供了几种。你可以单独下载下来。放到本地看以看。然后通过对幻灯代码的修改达到你想要的展示方式。我们只需要调整结构和重新指定css样式就可以了。

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

    广告
    广告
    广告