微信小程序开发-图片切换功能，小程序切图功能，给轮播图添加点击左右滑动效果，给轮播图添加点击切换效果，循环切换

需求背景：给轮播图添加点击左右滑动效果，给轮播图添加点击切换效果，循环切换。

读者可根据代码示例与代码说明、注释结合来看，并根据实际需求来做调整：

第一步：在分页的js文件中，实现在小程序分页中展示多张图片，并利用索引触发来实现切换到上一张和下一张图片的功能。通过维护一个变量来记录当前显示的图片索引，并通过点击事件触发不同的处理函数来实现对应功能。imageUrls数组中的图片地址可以自行替换。
代码示例：

// subpkg/culture_detail/culture_detail.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    imageUrls: [
      'https://clubimg.club.vmall.com/data/attachment/forum/202011/08/21520195o5eux63aifthgc.jpg',
      'https://ts1.cn.mm.bing.net/th/id/R-C.c583af9d20530edb11d0594a639c21da?rik=NxXktj9VhUeMyg&riu=http%3a%2f%2fc-ssl.duitang.com%2fuploads%2fitem%2f202005%2f11%2f20200511234317_yyedf.jpeg&ehk=KgWcFxw%2blPbKkeEvTpleqjpe8TtoRKLe9Im4eSpTEGs%3d&risl=&pid=ImgRaw&r=0',
      'https://ts1.cn.mm.bing.net/th/id/R-C.7d78979d751f4b76644570c905400ebb?rik=3HD3QpmHIUXDIQ&riu=http%3a%2f%2finews.gtimg.com%2fnewsapp_bt%2f0%2f13256492782%2f1000.jpg&ehk=%2bP%2fc%2bLu6f8g7gLrRhz57Z5C3orUee7XaXETHUIyjrIM%3d&risl=&pid=ImgRaw&r=0',
      'https://ts1.cn.mm.bing.net/th/id/R-C.82f874d67763fb88eb1411b6e9ed9bc2?rik=7IcB6yZGvFTl5A&riu=http%3a%2f%2f5b0988e595225.cdn.sohucs.com%2fimages%2f20190815%2f89e64468e2394adb836576fb3e4db274.JPG&ehk=zQTg4CoCyn97tNU%2fXKQIIkfM%2fUlM3nIfPD%2fbcmvMW80%3d&risl=&pid=ImgRaw&r=0'
    ],
    currentIndex: 0
  },
  onTapBack: function () {
    wx.navigateBack(
      {delta: 1}
    );
  },
  // 上一张图片
  prevImage: function() {
    var currentIndex = this.data.currentIndex;
    if (currentIndex === 0) {
      currentIndex = this.data.imageUrls.length - 1;
    } else {
      currentIndex--;
    }
    this.setData({
      currentIndex: currentIndex
    });
  },
  // 下一张图片
  nextImage: function() {
    var currentIndex = this.data.currentIndex;
    if (currentIndex === this.data.imageUrls.length - 1) {
      currentIndex = 0;
    } else {
      currentIndex++;
    }
    this.setData({
      currentIndex: currentIndex
    });
  }
  
})

代码说明：
1. 在 `data` 中定义了一个 `imageUrls` 数组，包含了四张图片的路径。同时，还定义了一个 `currentIndex` 变量，用于表示当前显示的图片索引。

2. `onTapBack` 函数是一个点击事件处理函数，当触发该事件时，调用 `wx.navigateBack()` 方法返回上一页。其中 `{delta: 1}` 表示返回上一页的层级为 1。（此功能在上一篇文章中有详解，在这就不细说了）

3. `prevImage` 函数是一个上一张图片的处理函数，在点击事件触发时执行。首先获取当前图片索引 `currentIndex` 的值，然后根据条件判断进行相应操作：如果当前索引为 0，则将索引设置为最后一张图片；否则将索引减一。最后通过 `setData()` 方法更新数据，并将新的索引值赋给 `currentIndex`。

4. `nextImage` 函数是一个下一张图片的处理函数，在点击事件触发时执行。与 `prevImage` 类似，根据条件判断进行相应操作：如果当前索引为最后一张图片，则将索引设置为 0；否则将索引加一。最后通过 `setData()` 方法更新数据，并将新的索引值赋给 `currentIndex`。

第二步：在分页的json文件中设置页面横屏显示
代码示例：

// subpkg/culture_detail/culture_detail.json
{
  "usingComponents": {
    "van-icon": "@vant/weapp/icon/index" // 引用van图标组件
  },
  "pageOrientation": "landscape", // 设置页面横屏显示
  "navigationStyle": "custom" // 不显示默认的导航栏
}

第三步：在分页的WXML文件中给页面布局，实现在小程序页面中展示轮播图、切换图片以及显示文字内容的功能。通过适当布局和组合不同的小程序组件来实现所需效果，并通过绑定相应的事件处理函数来实现交互功能。

代码示例：

<!--subpkg/culture_detail/culture_detail.wxml-->
<view class="top-box">
  
<!-- 轮播图 -->
  <swiper class="swiper" autoplay="{{false}}" circular current="{{currentIndex}}">
    <block class="block" wx:for="{{imageUrls}}" wx:key="*this">
      <swiper-item class="swiperitem">
        <image class="image" src="{{item}}" mode="aspectFill"></image>
      </swiper-item>
    </block>
  </swiper>
  <view class="prevImage-box">
    <button class="button" bindtap="prevImage">
      <van-icon class="button" name="down" custom-style="transform: rotate(-90deg)" size="25px" color="white"  />
    </button>
  </view>
  <view class="nextImage-box">
    <button class="button" bindtap="nextImage">
      <van-icon class="button" name="down" custom-style="transform: rotate(90deg)" size="25px" color="white"  />
    </button>
  </view>
  
  <!-- 第一行文字 -->
  
    <view class="text1-box">
      <button class="back-text" bindtap="onTapBack">返回</button>
    </view>
    <view class="text2-box">
      <text class="text2">章节</text>
    </view>
  
</view>

代码说明：
1. 代码中首先定义了一个 `top-box` 的 `view` 容器，用于包裹页面的内容。

2. 在 `top-box` 内部，使用了 `swiper` 组件来实现轮播图的效果。通过设置 `autoplay="{{false}}"` 来禁止自动播放轮播图，并通过 `current="{{currentIndex}}"` 来指定当前显示的图片索引。在 `swiper` 内部使用了一个 `block` 标签和 `wx:for="{{imageUrls}}" wx:key="*this"` 来遍历图片路径数组，并为每个路径创建一个 `swiper-item` 组件。在每个 `swiper-item` 内部使用了一个 `image` 组件来展示对应的图片，其中通过 `src="{{item}}"` 来绑定图片路径。

3. 在轮播图下方分别定义了上一张和下一张图片切换按钮。上一张按钮位于名为 `prevImage-box` 的容器内，其中使用了一个按钮组件 `<button>` 和绑定点击事件函数 `bindtap="prevImage"`。按钮内部使用了一个 `<van-icon>` 组件来显示向左旋转 90 度的箭头图标。

4. 下一张按钮位于名为 `nextImage-box` 的容器内，同样使用了一个按钮组件 `<button>` 和绑定点击事件函数 `bindtap="nextImage"`。按钮内部也是通过 `<van-icon>` 组件来显示向右旋转 90 度的箭头图标。

5. 最后，在轮播图和切换按钮之后，定义了两行文字内容。第一行文字包含一个返回按钮，通过 `<button>` 组件和绑定点击事件函数 `bindtap="onTapBack"` 实现返回功能。第二行文字则直接使用 `<text>` 标签并设置相应样式来展示文本内容。

第四步：在分页的WXSS文件中设置页面的样式，通过类选择器来定义小程序页面中各个元素的样式，包括容器的布局方式、位置、大小以及按钮和文本框的外观效果等。通过合理地设置不同元素的样式，实现了页面布局和视觉效果上的要求。请根据实际需求自行调整
代码示例：

<!--subpkg/culture_detail/culture_detail.wxml-->
<view class="top-box">
  
<!-- 轮播图 -->
  <swiper class="swiper" autoplay="{{false}}" circular current="{{currentIndex}}">
    <block class="block" wx:for="{{imageUrls}}" wx:key="*this">
      <swiper-item class="swiperitem">
        <image class="image" src="{{item}}" mode="aspectFill"></image>
      </swiper-item>
    </block>
  </swiper>
  <view class="prevImage-box">
    <button class="button" bindtap="prevImage">
      <van-icon class="button" name="down" custom-style="transform: rotate(-90deg)" size="25px" color="white"  />
    </button>
  </view>
  <view class="nextImage-box">
    <button class="button" bindtap="nextImage">
      <van-icon class="button" name="down" custom-style="transform: rotate(90deg)" size="25px" color="white"  />
    </button>
  </view>
  
  <!-- 第一行文字 -->
  
    <view class="text1-box">
      <button class="back-text" bindtap="onTapBack">返回</button>
    </view>
    <view class="text2-box">
      <text class="text2">章节</text>
    </view>
  
</view>

代码说明：
1. `.top-box` 类选择器定义了一个顶部容器的样式。设置 `display: flex;` 将其设为弹性布局，`flex-direction: row;` 表示子元素水平排列，`justify-content: space-between;` 表示子元素在主轴上均匀分布。`margin-top: 0rpx;` 设置顶部边距为 0，并通过 `position: relative;` 设置相对定位。

2. `.text1-box` 和 `.text2-box` 类选择器分别定义了两个文本容器的样式。通过 `position: absolute;` 将其绝对定位，并通过 `left`, `top`, 和 `transform: translate(-50%,-50%);` 来设置其位置居中偏移。同时设置了字体粗细为 700。

3. `.prevImage-box` 和 `.nextImage-box` 类选择器定义了上一张和下一张图片切换按钮的样式，同样使用了绝对定位并设置位置居中偏移。

4. `.button`, `.back-text`, 和 `.text2-box` 类选择器定义了不同按钮和文本框的样式。其中按钮具有背景颜色、高度、宽度、圆角等属性，并使用弹性布局使内容垂直居中显示；文本框具有背景颜色、高度、宽度、圆角等属性，并同样使用弹性布局使内容垂直居中显示。

5. `.four_right_down`, `.swiper`, `.swiperitem`, 和 `.image` 类选择器分别定义了其他元素的样式。其中轮播图容器具有宽度和高度属性；轮播图项和图片都具有相应的宽度和高度属性，且轮播图项使用弹性布局使内容垂直居中显示。

有任何问题，欢迎在评论区留言讨论~