如何在小程序让盒子里一排三张图片按顺序跳动显示

在微信小程序中，如果你想实现一排三个图片按照顺序逐个跳动显示的效果，可以使用`wx:if`、`wx:transition`和`setData`函数来动态控制图片的显示状态以及过渡效果。下面是一个简单的步骤说明：

1. 首先，在.wxml文件中创建一个`view`或者`swiper`标签，并包含三个`image`组件，每个`image`都有一个唯一的标识符（如`img1`, `img2`, `img3`），用于控制显示顺序。

<swiper class="swiper-container">
  <block wx:for="{{images}}" wx:key="*this">
    <image wx:if="{{currentIndex == index}}" src="{{item.src}}" style="width: 100%; height: auto;" wx:transition="{{transitionDuration}}">
      <!-- 图片1、2、3 -->
    </image>
  </block>
</swiper>

2. 在.js文件中，设置一个数组`images`，初始化当前显示的图片索引（例如`currentIndex = 0`）和过渡时间(`transitionDuration`)。

Page({
  data: {
    images: [
      {src: 'path/to/image1', index: 0},
      {src: 'path/to/image2', index: 1},
      {src: 'path/to/image3', index: 2}
    ],
    currentIndex: 0,
    transitionDuration: 1000 // 动画持续时间（单位：毫秒）
  },
  //...
})

3. 创建一个方法（比如`nextImage()`）来切换图片，当`currentIndex`等于最后一个元素的索引时，循环回到第一个。同时更新`currentIndex`和启动过渡动画。

methods: {
  nextImage() {
    let maxIndex = this.data.images.length - 1;
    if (this.data.currentIndex < maxIndex) {
      this.setData({
        currentIndex: this.data.currentIndex + 1,
      });
      this.startTransition();
    } else {
      this.setData({
        currentIndex: 0,
      });
    }
  },
  startTransition() {
    this.setData({
      currentAnimate: true, // 开启过渡效果
    }, () => {
      setTimeout(() => {
        this.setData({
          currentAnimate: false, // 结束过渡效果
        });
      }, this.data.transitionDuration);
    });
  }
}

4. 调用`startTransition`方法在每次图片切换后启动过渡效果，当动画结束后再次调用`nextImage`。

5. 如果你想添加用户交互（比如按钮点击触发跳转），可以在对应的事件处理函数中调用`nextImage`。

现在，当你运行小程序时，这排图片就会按照顺序依次跳动显示了。你可以根据需要调整过渡时间和图片列表。