微信小程序：轮播图中间大两边小、中间高亮显示_swiperl轮播图在页面中间时候高亮-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_37378399/article/details/86219735

本文详细介绍了一种在微信小程序中实现轮播图组件的方法，包括动态调整居中项、图片展示及文字说明。通过使用swiper组件并设置适当的样式和交互逻辑，实现了自动播放、平滑切换的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果展示：
test.wxml:

<swiper display-multiple-items='1' current='{{ centerItem }}' bindchange='changeFun' circular='true'
  previous-margin='50' next-margin='50' autoplay='true' interval='2000'>
  <block wx:for="{{imgInfoArr}}">
    <swiper-item>
      <view class='optionBox' style='text-align:center'>
        <view class='mask' wx:if='{{ index != centerItem }}'></view>
        <image src="{{item.src}}" mode='aspectFit' />
        <view class='swiperText' style='font-size:0.5em;'>{{ item.text }}</view>
      </view>
    </swiper-item>
  </block>
</swiper>

test.wxss:

swiper{
  height: 200px;
}
.optionBox {
  width: 100%;
  height: 90%;
}
.optionBox image {
  width: 100%;
  height: 100%;
}
.swiperText {
  width: 100%;
  height: 25px;
  text-align: center;
  font-family: bariol_bold;
  font-size: 0.5em;
  color: #4a4a4a;
}

.mask {
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, .5);
  position: absolute;
  left: 0;
  top: 0;
}

.perch {
  width: 100%;
  height: 100%;
}

test.js:

// text/text.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgInfoArrLength: 0,  // 轮播图列表的长度
    centerItem: 0,  // 居中项的位置
    imgInfoArr: [
      {
        src: 'https://qidian.qpic.cn/qidian_common/349573/16af4f9cfd8b15a6cea1df7eea361a91/0',
        text: '测试数据',
        id: 0
      },
      {
        src: 'https://qidian.qpic.cn/qidian_common/349573/e1f9f863e6f8fe99c9002e88eb96326b/0',
        text: '测试数据',
        id: 1
      },
      {
        src: 'https://qidian.qpic.cn/qidian_common/349573/6805566e37fae69d0be5677f5367889a/0',
        text: '测试数据',
        id: 2
      },
      {
        src: 'https://img-blog.csdnimg.cn/img_convert/38f33b9524fd9721a94288ac362df44f.png',
        text: '测试数据',
        id: 3
      },
      {
        src: 'https://img-blog.csdnimg.cn/img_convert/8e67cedfa44958ddf6cd6d06c7442d06.gif',
        text: '测试数据',
        id: 4
      },
      {
        src: 'https://img-blog.csdnimg.cn/img_convert/22b38b7a25bacf62baee4780453f630a.png',
        text: '测试数据',
        id: 5
      },
      {
        src: 'https://img-blog.csdnimg.cn/img_convert/a8965b22caafad7ad17f77f571e3b5ce.png',
        text: '测试数据',
        id: 6
      }
    ],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var len = this.data.imgInfoArr.length;
    var center = parseInt(len/2);
    this.setData({
      imgInfoArrLength: len,
      centerItem: center
    })
  },

  changeFun(e) {
    this.setData({
      centerItem: e.detail.current,
    })
  }
})