当前位置：首页 > 网页制作 > CSS > 详细页面

纯css3实现横向无限滚动的示例代码

时间：2020-11-07来源：www.pcxitongcheng.com作者：电脑系统城

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

wxml

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

1
2
3
4
5
6
7
8 <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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40 .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);
}
}

调整速度的关键就在，动画的时间是由循环的项目个数动态控制的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 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`
})
}
})

纯css3实现横向无限滚动的示例代码

相关信息

热门系统总排行

装机必备

系统教程栏目

栏目热门教程

人气教程排行

站长推荐

热门系统下载