微信小程序swiper旋转木马

wx.html

<!--index.wxml-->
<swiper class='swiperClass'  interval="2000" duration="1000" previous-margin="30px"   next-margin="30px" circular bindchange="bindchange"   style='height: 1000rpx'>  
    <block wx:for="{{imgUrls}}" wx:key="{{index}}">    
        <swiper-item>      
            <image src="{{item}}" class="slide-image {{swiperIndex == index ? 'active' : 'quiet'}}" mode='aspectFill'> 
             </image>    
        </swiper-item>  
    </block> 
</swiper>复制代码

复制代码

wx.css

page{  
    position: relative;  
    height: 1334rpx;
}
.swiperClass {
  margin: 0;
  margin-top: 10px;
} 
.slide-image {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  position: relative;
} 
image.active {
  transform: none;
  transition: all 0.2s ease-in 0s;
} 
image.quiet {
  transform: scale(0.8333333);
  transition: all 0.2s ease-in 0s;
}复制代码

wx.js

Page({  
/**   * 页面的初始数据   */ 
 //.js  
data: { 
   chooseSize: false,
   animationData: {},
   touchS: [0, 0],
   touchE: [0, 0],
   imgUrls: [
      "../../image/banner1.png",
      "../../image/banner2.png", 
     "../../image/banner3.png"
     ], 
   swiperIndex: 0 //这里不写第一次启动展示的时候会有问题  
}, 
 bindchange(e) {
    this.setData({
      swiperIndex: e.detail.current
    })  }, 
 /**   * 生命周期函数--监听页面加载   */  
onLoad: function (options) { 
 },  
/**   * 生命周期函数--监听页面初次渲染完成   */ 
onReady: function () { 
 },  
/**   * 生命周期函数--监听页面显示   */  
onShow: function () { 
 },  
/**   * 生命周期函数--监听页面隐藏   */  
onHide: function () { 
 },  
/**   * 生命周期函数--监听页面卸载   */ 
onUnload: function () { 
 }, 
/**   * 页面相关事件处理函数--监听用户下拉动作   */  
onPullDownRefresh: function () { 
 },  
/**   * 页面上拉触底事件的处理函数   */  
onReachBottom: function () { 
 },  
/**   * 用户点击右上角分享   */  
onShareAppMessage: function () { 
 }})复制代码