小程序实现3D轮播图效果_小程序3d轮播图-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_52039188/article/details/126171924

本文展示了如何在小程序中通过swiper组件创建3D轮播图效果，包括HTML结构、CSS样式和JavaScript交互代码。示例代码详细解释了每个部分的作用，最终效果在最新基础库2.25.2上运行良好。

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

小程序通过swiper标签实现3D轮播图效果

一、效果图

二、代码块

1.html

<view wx:if="{{slideList.length>0}}" class="teachLoop">
    <swiper class="teachSwiper" circular previous-margin="230rpx" 
 bindchange="changeSwiperIndex">
       <block wx:for="{{slideList}}" wx:index="{{index}}" wx:key="index">
          <swiper-item class="item">
             <image src="{{fileUrl+item.slideShowImg}}" class="{{swiperIndex == index ? 'active' : 'no-active'}}" modex="heightFix" />
          </swiper-item>
       </block>
    </swiper>
</view>

2.css

.teachLoop {padding: 0 30rpx 30rpx 40rpx;position: relative;}
.teachSwiper { width: 100%; height: 250rpx; background-color: #f7f7f7; border-radius: 10rpx;}
.teachSwiper .item { display: flex; justify-content: center; align-items: center;width: 50% !important; }
.teachSwiper .item image { height: 166rpx; width: 166rpx; border-radius: 50%;}
.teachSwiper .item .active { transform: scale(1); transition: all .3s ease-in 0s; }
.teachSwiper .item .no-active { transform: scale(.6); transition: all .3s ease-in 0s; }

3.js

page({
    swiperIndex: 0,
    slideList: [],
}),

changeSwiperIndex(e) {
    this.setData({
        swiperIndex:e.detail.current
    })
}

三、基础库

此轮播图效果基于最新的基础库2.25.2 老版本的基础库可能渲染出来的效果会不一样！