微信小程序之图片无限轮播(右向左移动)

  <view class="scrollbox dis-flex">
                <view class="imgItem dis-flex" style="animation: {{computedAni}};">
                    <view class="imgFlex" style="{{item.level==0?'border:1rpx solid rgb(255, 468, 53);':''}}"
                        wx:for="{{classData}}" mode="aspectFill" wx:key="index">
                        <image src="{{item.image}}"></image>
                    </view>
                </view>
                <view class="imgItem dis-flex" style="animation: {{computedAni}};">
                    <view class="imgFlex" wx:for="{{classData}}" mode="aspectFill" wx:key="index">
                        <image src="{{item.image}}"></image>
                    </view>
                </view>
  </view>

.scrollbox {
    margin: 20rpx auto;
    text-align: center;
    /* height: 220rpx; */
    align-items: center;
    overflow: hidden;
}

.imgItem {
    animation: 24s rowup linear infinite normal;
}

.imgItem .imgFlex {
    border-radius: 16rpx;
    border: 1rpx solid rgba(255, 204, 204, 1);
    width: 128.81rpx;
    height: 128.84rpx;
    margin-right: 12rpx;
}

.imgItem image {
    /* width: 200rpx;
    height: 200rpx; */
    width: 128.81rpx;
    height: 128.84rpx;
    /* margin: 0 20rpx; */
    border-radius: 16rpx;
}

@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);
    }
}

数据源按照xml格式或者自定义即可(感谢某位大神的代码)

setAniSpeed(num) {
        let time = Math.ceil(num / (this.data.classData.length + 1) * 18) // 这里是以长度为5张图片的时候，动画时间15s为基准,可以自己调节
        this.setData({
            computedAni: `${time}s rowup linear infinite normal`
        })
        // console.log("computedAni", this.data.computedAni)
},