代码如下 ~~~ <!-- 滑动按钮要用到的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相关代码一般放在标签外面就可以了。如果放在标签内的话，就要放两处，注释那里要用到，所以注释那里要单独的放，注释外也即标签里边还要放。所以就没必要放在标签里边。