html中实现图片的无限滚动,【小程序】纯css3实现横向无限滚动

本文示例都是用小程序写的，但是不影响要实现的功能。

wxml

装图片的盒子多复制一份，让循环图片的首尾相接

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