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

一、添加轮播图片

二、wxml文件

<!-- 轮播图 -->

<view class='swipercontainer'>

<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" vertical='{{vertical}}' circular='{{circular}}' indicator-active-color='blue'>

<block wx:for="{{imgUrls}}">

<swiper-item>

<navigator url="{{item.link}}" hover-class="navigator-hover">

<image src="{{item.url}}" mode="widthFix" class="slide-image swipimg"/>

</navigator>

</swiper-item>

</block>

</swiper>

</view>

三、js文件

var app = getApp();

Page({

data: {

imgUrls: [

{

link:'/pages/index/index',

url:' /imgs/img-gaokao.jpg'

},

{

link: '/pages/index/index',

url: ' /imgs/img-bog.jpg'

},

{

link: '/pages/index/index',

url:' /imgs/3.jpg'

}

],

indicatorDots: true, // 是否显示面板指示点

autoplay: true, //是否自动切换

circular: true, //是否采用衔接滑动

vertical: false, //滑动方向是否为纵向

interval: 3000, //自动切换时间间隔

duration: 100, //滑动动画时长

},

})

四、wxss文件

.swipercontainer {

position: relative;

left: 0;

right: 0;

width: 100%;

}

.swipimg {

width: 100%;

overflow: hidden;

}