纯css3如何实现横向无限滚动-创新互联

小编给大家分享一下纯css3如何实现横向无限滚动，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

网站建设哪家好，找创新互联！专注于网页设计、网站建设、微信开发、小程序定制开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了潜江免费建站欢迎大家使用！

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`
    })
  }
})

以上是“纯css3如何实现横向无限滚动”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

标题名称：纯css3如何实现横向无限滚动-创新互联
链接分享：https://www.cdcxhl.com/article4/didooe.html

成都网站建设公司_创新互联，为您提供App开发、企业建站、外贸建站、移动网站建设、企业网站制作、静态网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联