微信小程序图片轮播实现方法

您可以使用wx:if和wx:else控制图片的显示和隐藏，再通过控制按钮的点击事件来实现图片的轮播效果。

首先，在wxml文件中，将按钮和图片放在一个view中，并设置一个变量来控制图片的显示与隐藏：

<view>
  <button bindtap='toggleImage'>{{showImage ? '隐藏图片' : '显示图片'}}</button>
  <image class='thumbnail' wx:if='{{showImage}}' wx:key='index' src='{{currentImage}}' mode='aspectFill'></image>
</view>

接下来，在对应的js文件中，定义一个变量来存储图片列表和当前显示的图片索引，并编写toggleImage方法来切换图片的显示与隐藏：

Page({
  data: {
    images: ['image1.jpg', 'image2.jpg', 'image3.jpg'], // 图片列表
    showImage: false, // 控制图片显示与隐藏
    currentImageIndex: 0 // 当前显示的图片索引
  },
  toggleImage: function() {
    this.setData({
      showImage: !this.data.showImage
    });
  }
});

最后，通过在toggleImage方法中更新currentImageIndex来实现图片的轮播效果：

Page({
  data: {
    images: ['image1.jpg', 'image2.jpg', 'image3.jpg'], // 图片列表
    showImage: false, // 控制图片显示与隐藏
    currentImageIndex: 0 // 当前显示的图片索引
  },
  toggleImage: function() {
    if (this.data.showImage) {
      // 如果图片已显示，则切换到下一张图片
      let newIndex = (this.data.currentImageIndex + 1) % this.data.images.length;
      this.setData({
        currentImageIndex: newIndex
      });
    }
    this.setData({
      showImage: !this.data.showImage
    });
  },
  onLoad: function() {
    this.setData({
      currentImage: this.data.images[this.data.currentImageIndex]
    });
  }
});

这样，点击按钮时，就可以实现图片的轮播效果了。