标签进阶之幻灯片制作 · 齐博CMS之X1

### 点击看大图 [![](https://box.kancloud.cn/c5b4ae1256d4a22f8166fb8afb1aad67_1236x424.jpg)](https://box.kancloud.cn/c5b4ae1256d4a22f8166fb8afb1aad67_1236x424.jpg) 标签快速入门那里所讲的标签设置是比较基础的.这里跟大家讲解一下复杂一点的设置,就拿幻灯片来举例吧. 幻灯片标签通常有两种,一种是后台单独上传幻灯片图片的.另一种是调用系统数据的. 那我们先讲第一种吧. 大家可以打开模板 \template\index_style\default\index\index.htm 查看里边的代码,会看到类似以下这样一段代码 ~~~  {qb:tag name='wap_index_rollpic1' val='listdb' type="images"}    <link rel="stylesheet" href="__STATIC__/index/default/slider.css"> <div id="slider" class="mui-slider" > <div class="mui-slider-group mui-slider-loop"> <div class="mui-slider-item mui-slider-item-duplicate"><a href="{:end($listdb)['url']}"><img alt="{:end($listdb)['title']}" src="{:end($listdb)['picurl']}"></a></div> {volist name="listdb" id="rs"} <div class="mui-slider-item"><a href="{$rs.url}"><img alt="{$rs.title}" src="{$rs.picurl}"></a></div> {/volist} <div class="mui-slider-item mui-slider-item-duplicate"><a href="{$listdb.0.url}"><img alt="{$listdb.0.title}" src="{$listdb.0.picurl}"></a></div> </div> <div class="mui-slider-indicator"> {volist name="listdb" id="rs"} <div class="mui-indicator {eq name='i' value='1'}mui-active{/eq}"></div> {/volist} </div> </div> <script type="text/javascript" charset="utf-8">var slider = mui("#slider");</script> {/qb:tag}  ~~~ 每个标签里边的第一个注释符就是代表演示数据,之前讲过了,在这里也不例外.一样的道理.调用数据为空的时候,就用注释符里边的演示数据,而使得默认页面不会太难看这个标签有两个参数 val='listdb' type="images" 第二个，就是代表调用组图 ,之前也讲解过了. 第一个，之前没讲过，这个是属于进阶的功能。设置这项参数后，代表告诉标签不要强制循环数据,，而是让用户自己自由控制。上面代码中的 ~~~ {volist name="listdb" id="rs"} <div class="mui-slider-item"><a href="{$rs.url}"><img alt="{$rs.title}" src="{$rs.picurl}"></a></div> {/volist} ~~~ 这段代码，就是代表用户自由控制循环数据，其中 name="listdb" 中的 listdb 与前面的 val='listdb' 是相对应的. val='listdb' 就是告诉标签我要使用变量数据，我给他命名为 listdb ，然后 TP 的循环标签就使用了这个变量数据，进行循环输出。如果不设置 val="xxxx" 这个参数的话，齐博标签就会强制把标签里边的内容循环输出的，这样就实现不了幻灯片的个性效果，而对于其它普通的标题例表，就没影响的。当然其它标签，你也可以按这样的方式处理。但显得就是绕弯了。细心的网友，可能会发现上面的循环 {volist name="listdb" id="rs"} 执行了两次。这个是因为这个幻灯片有点特殊。一般情况，只执行一次就够了。但也从另一方面告诉大家，你可以自由控制循环数据最后跟大家注明一下 {volist name="listdb" id="rs"} HTML代码 {/volist} 这种是thinkphp的标签.大家可以参阅以下网址 [https://www.kancloud.cn/manual/thinkphp5/125017](https://www.kancloud.cn/manual/thinkphp5/125017) 上面讲的是 type="images" 调用组图, 把他换成 type="cms" 或者是其它频道.用法也是一样的上面虽然是拿幻灯片来举例.其它类似的网页特效也是通用的.借助齐博标签把数据取出来后.再结合TP标签想怎么变化都没问题的. 总而言之就是: ### 齐博标签主要是负责取数据 TP标签就负责控制如何显示.