微信小程序开发实现轮番图效果swiper 组件

轮番效果在很多的网站主页或者手机应用端都能看到，在微信小程序中使用swiper组件来实现图片轮番，今天的小例子效果如下：

为了方便演示我将动画切换的间隔调整为3s，现实项目中一般为5s，具体看项目需求而定。
实现图片轮番使用swiper滑块视图容器组件，页面结构文件代码如下：

<!--mySwiper.wxml-->
<view class="container">
    <swiper indicator-dots="{
  {indicatorDots}}"
    autoplay="{
  {autoplay}}" interval="{
  {interval}}" duration="{
  {duration}}">
        <block wx:for="{
  {imgUrls}}">
            <swiper-item>
               <image src="{
  {item}}" class="slide-image" width="355" height="150"/>