純css3實(shí)現(xiàn)橫向無限滾動(dòng)的示例代碼

發(fā)布時(shí)間：2020-11-06 17:08:51 作者：流年朝朝

這篇文章主要介紹了純css3實(shí)現(xiàn)橫向無限滾動(dòng)的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

本文示例都是用小程序?qū)懙?，但是不影響要?shí)現(xiàn)的功能。

wxml

裝圖片的盒子多復(fù)制一份，讓循環(huán)圖片的首尾相接

<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

調(diào)整速度的關(guān)鍵就在，動(dòng)畫的時(shí)間是由循環(huán)的項(xiàng)目個(gè)數(shù)動(dòng)態(tài)控制的

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張圖片的時(shí)候，動(dòng)畫時(shí)間15s為基準(zhǔn),可以自己調(diào)節(jié)
    this.setData({
      computedAni: `${time}s rowup linear infinite normal`
    })
  }
})

點(diǎn)擊這里可以查看代碼片段

https://developers.weixin.qq.com/s/4gGngEm67Zlh

到此這篇關(guān)于純css3實(shí)現(xiàn)橫向無限滾動(dòng)的示例代碼的文章就介紹到這了,更多相關(guān)css3橫向無限滾動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！