当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 微信小程序实现带缩略图轮播效果

微信小程序实现带缩略图轮播效果

2018年11月26日  | 移动技术网IT编程  | 我要评论

本文实例为大家分享了微信小程序实现实现轮播效果展示的具体代码，供大家参考，具体内容如下

wxml:

<view id="content">
 <!--banner-->
 <view class="recommend">
  <view class="swiper-container">
   <swiper autoplay="auto" interval="5000" duration="500" current="{{swipercurrent}}" circular="{{circular}}" bindchange="swiperchange" class="swiper">
    <block wx:for="{{slider}}" wx:key="unique">
     <swiper-item data-id="{{item.id}}" data-url="{{item.linkurl}}" class="dot{{index == swipercurrent ? ' active' : ''}}" bindtap="chuangevents" id="{{index}}">
      <image src="{{item.picurl}}" class="img"></image>
      <span>{{item.index+1}}</span>
     </swiper-item>
    </block>
   </swiper>
   <view class="dots">
    <swiper autoplay="auto" interval="5000" display-multiple-items="7" duration="500" current="{{dotscurrent}}" circular="{{circular}}" bindchange="dotschange">
     <block wx:for="{{slider}}" wx:key="unique">
      <swiper-item data-id="{{item.id}}" class="dot{{index == swipercurrent ? ' active' : ''}}" bindtap="chuangevent" id="{{index}}">
       <image src="{{item.picurl}}" class="imgs"></image>
      </swiper-item>
     </block>
    </swiper>
   </view>
 
  </view>
 </view>
</view>

wxss:

/* pages/shouye/shouye.wxss */
 
page {
 background: #333;
 width: 100%;
 height: 100%;
 overflow: hidden;
}
 
#content {
 background: #333;
 width: 100%;
 height: 100%;
 overflow: hidden;
}
 
a {
 width: 100%;
 height: 50px;
 overflow: hidden;
}
 
/*banner轮播 */
 
.swiper-container {
 margin-top: 23%;
 position: relative;
}
 
.swiper-container .swiper {
 height: 600rpx;
}
 
.swiper-container .swiper .img {
 width: 100%;
 height: 100%;
}
 
.swiper-container .dots {
 position: fixed;
 height: 80px;
 right: 0rpx;
 width: 100%;
 bottom: 0rpx;
}
 
.swiper-container .dots .dot {
 /* margin: auto 3px; */
 /* width: 58px !important; */
 height: 65px !important;
 /* background: #333; */
 /* transition: all 0.6s; */
}
 
.swiper-container .dots .dot.active .imgs {
 width: 100% !important;
 height: 100%;
 margin: 0% auto;
}
 
.imgs {
 width: 85%;
 display: block;
 margin: 5% auto;
 height: 90%;
}
 
.swiper-container .dotes {
 position: absolute;
 right: 40rpx;
 bottom: 20rpx;
 display: flex;
 justify-content: center;
}
 
.swiper-container .dotes .dote {
 margin: 0 10rpx;
 width: 28rpx;
 height: 28rpx;
 background: #fff;
 border-radius: 50%;
 transition: all 0.6s;
 font: 300 18rpx/28rpx "microsoft yahei";
 text-align: center;
}
 
.swiper-container .dotes .dote.actives {
 background: #f80;
 color: #fff;
}

js

 //banner
page({
 data: {
  //轮播图
  slider: [],
  swipercurrent: 3,
  slider: [{
   url: '', picurl: 'images/1.jpg'
  },
  {
   picurl: 'images/5.jpg'
  },
  {
   picurl: 'images/3.jpg'
  },
  {
   picurl: 'images/4.jpg'
  },
  {
   picurl: 'images/5.jpg'
  },
  {
   picurl: 'images/3.jpg'
  },
  {
   picurl: 'images/5.jpg'
  },
  {
   picurl: 'images/3.jpg'
  },
  {
   picurl: 'images/5.jpg'
  },
  {
   picurl: 'images/3.jpg'
  },
  {
   picurl: 'images/5.jpg'
  },
  {
   picurl: 'images/3.jpg'
  }
  ],
  indicatordots: true,
  autoplay: true,
  interval: 2000,
  duration: 1000,
  circular: true,
  beforecolor: "white",//指示点颜色 
  aftercolor: "coral",//当前选中的指示点颜色 
 },
 //轮播图的切换事件 
 swiperchange: function (e) {
  //只要把切换后当前的index传给<swiper>组件的current属性即可 
  this.setdata({
   swipercurrent: e.detail.current
  })
 },
 dotschange: function (e) {
  //只要把切换后当前的index传给<swiper>组件的current属性即可 
  this.setdata({
   dotscurrent: e.detail.current
  })
 },
 //点击指示点切换 
 chuangevent: function (e) {
  this.setdata({
   swipercurrent: e.currenttarget.id
  })
 },
 chuangevents: function (e) {
  this.setdata({
   dotscurrent: e.currenttarget.id
  })
 },
 
})

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网