在微信项目开发中，轮播图承担着广告展示、热门产品推荐等重要作用。 以下是两种小程序轮播图形的一般样式。
演示
有层次感的3D
没有层次感的平面源代码
有层次感的3D
wxml
view class=' swipercontainer ' swiperclass=' image container ' bind change=' swiperchange ' previous-margin=' 55 rpx ' wx : key=' index ' swiper-item class=' turn item ' imageclass=' item img { { index } } img active ' : ' } ' src=-指示点修饰--view class=' dots ' block wx : for=' { { turn img } } ' wx 3360 key=' index ' view class=' dot { { { index }==
. swipercontainer { margin-top :15 rpx； bottom: 8rpx； position: relative； }.image container { width :100 %； margin-top: 10rpx； height: 350rpx； }.turnItem{ height: 340rpx； }.item img { position : absolute； width: 99%； height: 300rpx； margin-top: 20rpx； border-radius: 15rpx； }.imgActive{ opacity: 1； height: 340rpx； margin-top: 0rpx； transition:all .2s ease-in 0s； (/)指示点修饰(/.dots ) position:absolute； left: 0； right: 0； bottom: 25rpx； 显示： Flex； justify-content: center； }.dot{ margin: 0 8rpx； width: 18rpx； height: 18rpx； 背景色： white； border-radius: 8rpx； transition: all .5s； }.dot.active{ width: 24rpx； 后台： # fad 81e； } wxss
data:{ swiperCurrent: '，/指示点}，//swiper幻灯片事件swiperchange:function(e )//指示图标this.setdata ) ) swiperchange
wxml
view class=' swipercontent ' swipercircular=' true ' autoplay=' { { autoplay } } interval={ { interval } } duratival } 显示： block； 盒尺寸： border-box； left: NaNrpx； top 3360 nan rpx ' block wx : for=' { banner } } ' wx : key=' unique ' swiper-itemimagesrc=' { { item } } ' class=sis ' wx 3360 key=' unique ' view class=' dot { { index }==swipe rer active ' : ' } '/view/block/view/viewwxss
swiper{ width: 710rpx； height: 280rpx； border-radius: 5px； }.le-img { width: 710rpx； height: 280rpx； 显示： block； border-radius: 5px； }.dots{ position: absolute； left: 0； right: 0； bottom: 20rpx； 显示： Flex； justify-content: center； }.dot{ margin: 0 8rpx； width: 14rpx； height: 14rpx； 背景： # CCC； border-radius: 8rpx； transition: all .5s； }.dot.active{ width: 24rpx； 后台： # f66d 77； } js
data:{ autoplay: true，interval: 5000，nowIdx:0，swiperCurrent: 0，indicatorDots: true， duration33660 //swiper幻灯片事件swiperchange:function(e )//指示图标this.setdata ) nowidx:e.detail.current，swidx 可以用于毕业设计、图文共享项目。 操作简单，可以利用腾讯免费提供的云开发空间完成所有操作。 节约成本，方便快捷，当天上线。
链接： https://download.csdn.net/download/weixin _ 52658156/20238876