代碼如下 ~~~ <!-- 滑動按鈕要用到的CSS與JS文件,他涉及到三個class類 swiper-container swiper-wrapper swiper-slide --> <link href="__STATIC__/libs/swiper/swiper.min.css" rel="stylesheet"> <script src="__STATIC__/libs/swiper/swiper.min.js"></script> <script type="text/javascript"> $(function () { var swiper = new Swiper('.rollpic', { loop:true, autoplay: { delay: 2500, }, pagination: { el: '.swiper-pagination', }, }); }) </script> <!--標簽開始--> {qb:tag name="wap_bbs_rollpic001" type="images" val="picdb"} <!-- <div class="swiper-container rollpic"> <div class="swiper-wrapper"> <div class="swiper-slide"> <a href="#"><img src="__STATIC__/group/circle/wapbanner.jpg"></a> </div> <div class="swiper-slide"> <a href="#"><img src="__STATIC__/group/circle/wapbanner.jpg"></a> </div> </div> <div class="swiper-pagination"></div> </div> --> <!--特別提醒，上面屬于標簽內的第一個注釋符，會作為示例使用,也即用戶沒有設置標簽時候的默認數據--> <div class="swiper-container rollpic"> <div class="swiper-wrapper"> <!--用戶自定義的幻燈片循環開始--> {volist name="picdb" id="rs"} <div class="swiper-slide"> <a href="{$rs.url}"><img src="{$rs.picurl}"></a> </div> {/volist} <!--用戶自定義的幻燈片循環結束--> </div> <div class="swiper-pagination"></div> </div> {/qb:tag} <!--標簽結束--> <!--滾動幻燈片結束--> ~~~ 關于幻燈片的制作要點: 1、要考慮有一個演示數據，因為用戶一開始是沒有設置標簽的，沒有演示數據的話，就看不到效果。所以在標簽內的第一段注釋會當作演示數據使用。 2、幻燈片一般來說，標簽都要設置`val`參數，為的是可以把變量數組提取出來，方便在指定的位置循環輸出圖片。這就是一個關鍵點，他不同于普通的標題獲取標簽。普通的標簽獲取直接就可以循環輸出了。而這里卻要單獨的再使用`volist`重新處理循環。 3、JS相關代碼一般放在標簽外面就可以了。如果放在標簽內的話，就要放兩處，注釋那里要用到，所以注釋那里要單獨的放，注釋外也即標簽里邊還要放。所以就沒必要放在標簽里邊。