### 点击看大图 [![](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="#"><img src="__STATIC__/images/4.jpg"></a></div> <div class="mui-slider-item"><a href="#"><img src="__STATIC__/images/1.jpg"></a></div> <div class="mui-slider-item"><a href="#"><img src="__STATIC__/images/2.jpg"></a></div> <div class="mui-slider-item"><a href="#"><img src="__STATIC__/images/3.jpg"></a></div> <div class="mui-slider-item"><a href="#"><img src="__STATIC__/images/4.jpg"></a></div> <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="__STATIC__/images/1.jpg"></a></div> </div> <div class="mui-slider-indicator"> <div class="mui-indicator mui-active"></div> <div class="mui-indicator"></div> <div class="mui-indicator"></div> <div class="mui-indicator"></div> </div> </div> <script type="text/javascript" charset="utf-8">var slider = mui("#slider");</script> --> <!--上面的是演示数据,演示数据可有可无,有的话,必须以注释的形式紧跟在标签后面,下面的就是模板--> <!--每一个标签有开始与结尾标志 name就代表标签名,可以中文,不能重复,val就是想得到的变量名 type是指定要什么数据--> <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标签就负责控制如何显示.