共计 1367 个字符,预计需要花费 4 分钟才能阅读完成。
本文示例都是用小程序写的,然而不影响要实现的性能。
wxml
装图片的盒子多复制一份,让循环图片的首尾相接
<view class="scrollbox dis-flex">
<view class="imgItem dis-flex" style="animation: {{computedAni}};">
<image src="../img/{{index + 1}}.jpg" wx:for="{{images}}" mode="aspectFill" wx:key="index"></image>
</view>
<view class="imgItem dis-flex" style="animation: {{computedAni}};">
<image src="../img/{{index + 1}}.jpg" wx:for="{{images}}" mode="aspectFill" wx:key="index"></image>
</view>
</view>
wxss
.dis-flex {
display: flex;
display: -webkit-flex;
}
.scrollbox {
margin: 30px;
text-align: center;
border: 1px solid blue;
height: 220rpx;
align-items: center;
overflow: hidden;
}
.imgItem {animation: 24s rowup linear infinite normal;}
.imgItem image {
width: 200rpx;
height: 200rpx;
margin: 0 20rpx;
}
@keyframes rowup {
0% {-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
@-webkit-keyframes rowup {
0% {-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {-webkit-transform: translate3d(-1000px, 0, 0);
transform: translate3d(-1000px, 0, 0);
}
}
js
调整速度的要害就在,动画的工夫是由循环的我的项目个数动态控制的
Page({
data: {images: new Array(4),
computedAni: ''
},
onLoad: function () {this.setAniSpeed(this.data.images.length)
},
setAniSpeed (num) {let time = Math.ceil(num / 5 * 15) // 这里是以 5 张图片的时候,动画工夫 15s 为基准, 能够本人调节
this.setData({computedAni: `${time}s rowup linear infinite normal`
})
}
})
点击这里能够查看代码片段
https://developers.weixin.qq.com/s/4gGngEm67Zlh
正文完