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

效果图：

指示器-活动-颜色='#007aff'//修改选中图片圆点的颜色js:

const app=GetApp()Page({ data : {//-模拟旗帜图-imgurls :['/image/1545118381903。jpg '，'/image/1545118566631.jpg' ]，circular: true，//是否显示画板指示点指示3360为真，//选中点的颜色//是否竖直vertical: false，//是否自动切换autoplay: true，//自动切换的间隔interval: 3000，//滑动动画时长毫秒duration: 1000，//所有图片的高度imghelights 3360[]，//图片宽度imgwidth: 750，//默认current: 0 }，imageLoad:函数(e) {//获取图片真实宽度var imgwidth=e.detail.width，imgheight=e.detail.height，//宽高比比率=imgwidth/imgheight；console.log(imgwidth，imgheight) //计算的高度值var视图高度=750/比率；var imgheight=view height var imghelights=this。数据。imghelights//把每一张图片的对应的高度记录到数组里目标。数据集。id]=imghelight；这个。setdata({ imgherights 3360 imgherights })}，bindchange:函数(e){//控制台。日志(例如详细信息。电流)这个。setdata({当前3360 e . detail。当前})}，})wxml:

！-首页轮播图-view class=' swiper ' swiper indicator-dots=' { { indicatorDots } } ' vertical=' { { vertical } } ' autoplay=' { { autoplay } } ' duration=' { { duration } } ' interval=' { { interval } } ' indicator-active-color=' # 007 aff ' bind change=' bind change ' circle=' { { circular } } ' style=' height 3333: { { imghelights[current]} } rpx；'block wx : for=' { { IMGurls } } ' wx : key=' { { index } } ' swiper-item image src=' http : { { item } } ' data-id=' { { index } } ' class=' slide-image ' mode=' withFix ' bind load=' imageLoad '/swiper-item/block/swiper/view XSS 3360。捣蛋鬼图像{宽度： 100%；height: auto}。swiper-image { height : 100%；宽度： 100%;} .幻灯片图像{身高： 100%；宽度： 100%;显示器：块；}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。