小程序之轮播图实现

效果图：

js代码实现

Page({
  data: {
    //轮播图
    indicatorDots: true,//显示面板指示点
    autoplay: true,//自动切换
    interval: 3000,//自动切换时间间隔
    duration: 800,//滑动动画时长
    circular: true,//采用衔接滑动
    indicatorColor:"#ffdfdc",//指示点颜色
    indicatoraAactive:"#ff948a",//当前选中的指示点颜色
  },
  swiperChange: function (e) { 
    this.setData({
      swiperCurrent: e.detail.current
    })
  },
  chuangEvent: function (e) {
    this.setData({
      swiperCurrent: e.currentTarget.id
    })
  },
  swipclick: function (e) {
    console.log(this.data.swiperCurrent);
    wx.switchTab({
      url: this.data.links[this.data.swiperCurrent]
    })
  },
})

wxml实现

<view>
  <!--轮播图-->
  <!--设置自动切换，切换时间为1s，显示面板指示点；切换缓动动画类型，动画从头到尾的速度是相同的-->
  <swiper autoplay interval='1000' circular="true" indicator-dots="true" easing-function="linear">
    <swiper-item>
        <image mode="widthFix" src="/images/1.png" />  
    </swiper-item>
    <swiper-item>
        <image mode="widthFix" src="/images/2.png" />  
    </swiper-item>
    <swiper-item>
        <image mode="widthFix" src="/images/3.png" />  
    </swiper-item>
</swiper>
</view>

less实现

swiper {
  height: 400rpx;
  } 
  swiper-item image {
  width: 100%;
  height: 100%;
  }
  .swiper-container{
  //生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常位置进行定位。可通过z-index进行层次分级。
  position: relative;
  //margin-top：功能为设置元素的上外边距,允许使用负值。定义固定的上外边距。默认值是 0。
  //margin-top是你这个层的边距设置，是上边距，top是当css样式为绝对定位（即position:absolute; ）时，left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位
  margin-top:-300rpx;
  }
  .swiper-container .swiper{
  height: 300rpx;
  }
  .swiper-container .swiper .img{
  width: 90%;
  height: 100%;
  margin: 0 5%;
  border-radius: 20rpx;
  }