智行火车票12306微信小程序的海报轮播效果设计

海报轮播效果可以在有限的区域内动态地显示不同的幻灯片图片，是很多网站或者App软件都会采用的一种展现方式，在仿智行火车票12306微信小程序的火车票界面里，采用海报轮播效果展示广告图片，如图16所示。

（1）进入到pages/train/train.wxml文件，采用view、swiper、image进行布局，图片宽度设置为100%，高度设置为80px，具体代码如下所示：

<view class="haibao">
  <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" style="height:80px;">
    <block wx:for="{{imgUrls}}">
      <swiper-item>
        <image src="{{item}}" style="width:100%;height:80px;"></image>
      </swiper-item>
    </block>
  </swiper>
</view>

swiper滑块视图容器设置为自动播放(autoplay="true")，自动切换时间间隔为3s(interval="3000")，滑动动画时长为1s(duration="1000")；

采用wx:for循环来显示要展示的图片，从train.js文件里获取imgUrls图片路径。

（2）进入到pages/ train/train.js文件，在data对象里定义imgUrls数组，存放海报轮播的图片路径，代码如下：

Page({
  data:{
      indicatorDots:false,
      autoplay:true,
      interval:5000,
      duration:1000,
      imgUrls:[
         '/images/haibao/1.jpg',
         '/images/haibao/2.jpg',
         '/images/haibao/3.jpg'
      ]
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  }
})

（3）这样就可以实现幻灯片轮播效果，如图所示。

                  

                                                                   海报轮播图