轮播图简单实现

小程序–轮播图实现

wxml代码

下面展示一些 wxml代码。
circular 是显示圆点
autoplay是自动轮播
indicator-color是轮播前小圆点颜色
indicator-active-color是轮播后小圆点颜色

<swiper class="content-info-slide" indicator-color="rgba(255,255,255,.5)" indicator-active-color="#fff" indicator-dots="true" circular autoplay>    
<swiper-item>     
 <image src="/pages/index3/img/timg.jpg"></image>    
 </swiper-item>    
 <swiper-item>      
 <image src="/pages/index3/img/timg2.jpg"></image>    
 </swiper-item>    
 <swiper-item>      
 <image src="/pages/index3/img/timg3.jpg"></image>   
 </swiper-item>  
 </swiper>

wxss代码

/* 轮播图 */
.content-info-slide{  
height: 502rpx;  
margin-bottom: 20px;
}
.content-info-slide image{  
height: 100%;  
width: 100%;
}

效果图