自定义diy幻灯片展示方式

官方默认的幻灯幻灯片展示样式，也许你想换换样子了。呵呵，下面我就给大家分享下如何自定义自己的diy幻灯模块。
下面是默认的展示样式：

默认的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>

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

但是有时候我们经常需改变它的展示方式让他变得更有色彩感，例如下面这种展示方式：

这是我修改后的模板代码：

<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样式就可以了。

我是刚使用DZ的初学者，想问下LZ这段代码放到哪呢？怎么使用啊！谢谢

zolg212 发表于 2011-4-2 17:29
我是刚使用DZ的初学者，想问下LZ这段代码放到哪呢？怎么使用啊！谢谢

diy后   弹出的选项卡  有属性、数据、模板等  

回复 ohanko 的帖子

嘿嘿，谢谢大虾指导啊！
明白一些了，可是能说的在具体些吗？
是修改展示类的静态模块里的数据还是其他什么模块的数据啊？

回复 zolg212 的帖子



需要调用的一些东东  就不在模块模板里面了  
多在教程区看看 多替换替换、分析分析……

回复 ohanko 的帖子

恩，好的！谢谢啦！嘿嘿
学习去喽~~~~

    本公司专业做php，java项目外包和人才派遣。QQ；1584414787
电话；13121777156     联系人；王懿芳

学习

好帖，收藏了

还有其他的最好了，呵呵