标签进阶之幻灯片制作

标签快速入门那里所讲的标签设置是比较基础的.这里跟大家讲解一下复杂一点的设置,就拿幻灯片来举例吧.

幻灯片标签通常有两种,一种是后台单独上传幻灯片图片的.另一种是调用系统数据的. 那我们先讲第一种吧.

大家可以打开模板
\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

上面讲的是 type="images" 调用组图, 把他换成 type="cms" 或者是其它频道.用法也是一样的

上面虽然是拿幻灯片来举例.其它类似的网页特效也是通用的.借助齐博标签把数据取出来后.再结合TP标签想怎么变化都没问题的. 总而言之就是:

齐博标签主要是负责取数据 TP标签就负责控制如何显示.

转载于:https://my.oschina.net/u/3840366/blog/1834820