先看一下效果：
shadow.gif
swiper的相关属性
indicator-dots 是否显示小圆点，也可以自己重新设置小圆点
circular 是否衔接滑动，就是实现无限滚动
previous-margin 与上一张图片的间距
next-margin 与下一张图片的间距
autoplay 实现自动滚动
当前大图currentIndex只有一个值，让其等于所有item的index，当滚动到哪一个，就恰好可以选中哪一个
image.png
动态曾删类名
由于微信小程序开发不同于以往的普通web开发, 因此无法通过js获取wxml文件的dom结构, 因此从js上直接添加一个类名应该不可能了. 可是我们可以通过微信小程序数据绑定以及view标签的”data-“自定义属性去更改标签类名.
过数据绑定在3个标签上绑定相同的变量num, 当点击不同标签时, 在js逻辑层中通过event.target.dataset.n或者（e.target.dataset.n）来获取标签data-n值, 然后在wxml中通过三元运算符的匹配便可完成class名的增改
下面直接看代码：
wxml:
<!--index.wxml-->
<swiper
class="imageContainer"
bindchange="handleChange"
previous-margin="50rpx"
next-margin="50rpx"
circular
autoplay
>
<block wx:for="{{3}}" wx:key>
<swiper-item class="item">
<!-- 当前大图currentIndex只有一个值，让其等于所有item的index，当滚动到哪一个，就恰好可以选中哪一个！-->
<!-- 当前大图currentIndex只有一个值，让其等于所有item的index，当滚动到哪一个，就恰好可以选中哪一个！-->
<image class="itemImg {{currentIndex == index ? 'active': ''}}" src="https://upload-images.jianshu.io/upload_images/14707256-5aee35881aba4623.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/589/format/webp"></image>
</swiper-item>
</block>
</swiper>
<view class='li'>
<view class="{{num==1?'cur':''}} " bindtap='click' data-n="1">气候</view>
<view class="{{num==2?'cur':''}} " bindtap='click' data-n="2">温度</view>
<view class="{{num==3?'cur':''}} " bindtap='click' data-n="3">天气</view>
</view>
wxss:
/**index.wxss**/
/* carousel/index.wxss */
page{
background: #dac8c8f7;
}
.imageContainer{
width: 100%;
height: 500rpx;
background: #fff;
}
.item{
height: 500rpx;
}
.itemImg{
position: absolute;
width: 96%;
left: 50%;
transform: translateX(-50%);
height: 380rpx;
border-radius: 15rpx;
z-index: 5;
opacity: 0.7;
top: 13%;
}
.active{
opacity: 1;
z-index: 10;
height: 430rpx;
top: 7%;
transition:all .2s ease-in 0s;
}
.li{
display: flex;
justify-content: space-around;
}
.cur{
color: red;
text-decoration:underline;
}
JS:
Page({
data: {
currentIndex: 0,
num:1
},
onLoad: function (options) {
},
/* 这里实现控制中间凸显图片的样式 */
handleChange: function (e) {
this.setData({
//获取当前轮播显示的大图
currentIndex: e.detail.current
})
},
// 思路：先给每个元素加一个新属性，点谁就把谁的新属性赋值给data中的数据
click:function(e){
console.log(e.target.dataset.n)
this.setData({
num:e.target.dataset.n
})
}
})
