標簽進階之幻燈片制作 · 齊博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的標簽.大家可以參閱以下網址 [http://www.hmoore.net/manual/thinkphp5/125017](http://www.hmoore.net/manual/thinkphp5/125017) 上面講的是 type="images" 調用組圖, 把他換成 type="cms" 或者是其它頻道.用法也是一樣的上面雖然是拿幻燈片來舉例.其它類似的網頁特效也是通用的.借助齊博標簽把數據取出來后.再結合TP標簽想怎么變化都沒問題的. 總而言之就是: ### 齊博標簽主要是負責取數據 TP標簽就負責控制如何顯示.