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

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

w XM l

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

<view class="scrollbox dis-flex">
    <view class=" img  IT em dis-flex" style="animation: {{computedAni}};">
      <image src=" .. /img/{{index + 1}}. jpg " wx:for="{{images}}" mode="as PE ctFill" 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 {
  dis play : flex;
  display: - webkit -flex;
}
.scrollbox {
  m arg in: 30px;
  text-align:  center ;
  border: 1px solid blue;
  h ei ght: 220rpx;
  align -i tems: center;
  overflow: hidden;
}
.imgItem {
  animation: 24s rowup linear infinite normal;
}
.imgItem image {
  width: 200rpx;
  height: 200rpx;
  mar gin : 0 20rpx;
}
@keyfr am es rowup {
  0% {
      -webkit -t ransform: 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

到此这篇关于纯css3实现横向无限滚动的示例代码的 文章 就介绍到这了,更多相关css3横向无限滚动内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

总结

以上是 为你收集整理的 纯css3实现横向无限滚动的示例代码 全部内容，希望文章能够帮你解决 纯css3实现横向无限滚动的示例代码 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于纯css3实现横向无限滚动的示例代码的详细内容...