制作幻灯片标签教程

代码如下

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