小程序轮播图制作，小程序swiper实现

小程序轮播图

先看效果图：

小程序swiper组件（官网上很详细）官网连接：
https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

详细介绍

难点

• 滑块后的背景固定，不能跟着滑块一起动
• 背景颜色改变

源码奉上

• wxml 源码

<!-- banner START -->
    <view class='banner'>
      <view class="banner-swiper" >
      <!-- 后面的背景图   {{swiperColor}} 是动画 背景样式控制 border-radis控制   -->
        <view class='banner-radius {{swiperColor}}' style=' border-radius: 0 0 50% 50%;background-color:#78b4ff;'>
          <image style='width:100%;opacity:0.4;' src='../../image/banner-back.png'></image>
        </view>
         <!-- indicator-dots="false" 是否显示指示点  autoplay="false" 是否自动切换 circular=“false” 是否采用衔接滑动   -->
         <!-- interval=“1000” 自动切换的时间间隔 duration=“1500” 滑动的时长 bindchange='bannerChange' 滑块监控事件  -->
        <swiper 
          indicator-dots="{{indicatorDots}}" autoplay="true" circular="false" vertical="{{vertical}}"
          interval="3000" duration="1500"  bindchange='bannerChange' >
          <!-- banner数组 -->
          <block wx:for="{{banner}}" wx:key="*this">
            <swiper-item>
              <view  class="swiper-item"  bindtap='detail' data-id='{{index}}' ><image class='banner-image' src='{{baseUrl}}{{item.smallImage}}'></image></view>
            </swiper-item>
          </block>
        </swiper>
        <!--重置小圆点的样式  -->
         <view class="dots">  
            <block wx:for="{{banner}}">  
                <view class="dot{{index == bannerIndex ? ' active' : ''}}"></view>  
            </block>  
         </view>    
      </view>
    </view>
    <view style='width:100%;height:6px; background:#eaeaea;'></view>
    <!-- banner END -->

• wxss 这里说一下背景样式改变：我的实现方式是固定4中颜色进行动画切换。实现方式也是通过js控制 上面的{{swiperColor}} 就是。具体方式看js

.swiper-item{
 display: block;
 height: 150px;
}
.banner-image{
 width: 88%;
 height: 80%;
 margin-top:5%;
 margin-left: 6%;
 box-shadow: 0px 0px 4px 0px rgb(102, 101, 101);
 border-radius: 6px;
}
.banner-swiper{
 width: 100%;
 margin-bottom: 5px;
}
.banner-radius{
 width: 100%;
 height: 100px;
 position: absolute
}
.banner{
width: 100%;
display: flex;
align-items: center;
justify-content: center; 
}
.swiper-color1{
 animation: background1 3s 1;
 animation-fill-mode:forwards;
}
/* 固定动画效果 */
@keyframes background1{
 from { background-color: #78b4ff; }
 to { background-color: #3a3a3a; }	
}
.swiper-color2{
 animation: background2 3s 1;
 animation-fill-mode:forwards;
}
@keyframes background2{
 from { background-color: #3a3a3a; }
 to { background-color: #24d76f; }	
}
.swiper-color3{
 animation: background3 3s 1;
 animation-fill-mode:forwards;
}
@keyframes background3{
 from { background-color: #24d76f; }
 to { background-color: #ee8893; }	
}
.swiper-color0{
 animation: background0 3s 1;
 animation-fill-mode:forwards;
}
@keyframes background0{
 from { background-color: #ee8893; }
 to { background-color: #78b4ff; }	
}
.swiper-color-0{
 animation: background-0 3s 1;
 animation-fill-mode:forwards;
}
@keyframes background-0{
 from { background-color: #3a3a3a; }
 to { background-color: #78b4ff; }	
}
.swiper-color-1{
 animation: background-1 3s 1;
 animation-fill-mode:forwards;
}
@keyframes background-1{
 from { background-color: #24d76f; }
 to { background-color: #3a3a3a; }	
}
.swiper-color-2{
 animation: background-2 3s 1;
 animation-fill-mode:forwards;
}
@keyframes background-2{
 from { background-color: #ee8893; }
 to { background-color: #24d76f; }	
}
.swiper-color-3{
 animation: background-3 3s 1;
 animation-fill-mode:forwards;
}
@keyframes background-3{
 from { background-color: #78b4ff; }
 to { background-color: #ee8893; }	
}
/*用来包裹所有的小圆点  */
.dots {
 width: 93rpx;
 height: 18rpx;
 display: flex;
 flex-direction: row;
 position: absolute;
 left: 44%;
 top:20%;
 background-color:rgba(0,0,0,0.1);
 border-radius: 9rpx;
 padding-left: 10rpx;
 align-items: center;
 justify-content: center; 
}
/*未选中时的小圆点样式 */
.dot {
 width: 10rpx;
 height: 10rpx;
 border-radius: 50%;
 margin-right: 10rpx;
 background-color:#ccd2d0;
}
/*选中以后的小圆点样式  */
.active {
 width: 10rpx;
 height: 10rpx;
 background-color: #f8f4f4;
}

• jss实现

data: {
	swiperColor: '',/* 样式动画 */
    bannerIndex:0, /* 滑块的下标 */
    banner:[],  /* 获取的图片 */
    indicatorDots: false, /* 是否显示指示点 */
    vertical: false /*是否为镜像*/
    }
    /* banner改变监听事件 */
  bannerChange(e){
    let current = e.detail.current;
    let that = this
    let back =''
    /* swiperColor 背景颜色的动态改变方式 */
    if (current > that.data.bannerIndex || (current == 0 && that.data.bannerIndex==(that.data.banner.length-1))){
      back= "swiper-color" + current
    }else{
      back = "swiper-color-" + current
    }
    that.setData({
      swiperColor: back,
      bannerIndex: current
    })
  },

基本实现都写了，如果有不足或问题及时留言谢谢