1. ホーム
  2. Web制作
  3. CSS

[CSSチュートリアル】ピュアCSS3による水平無限スクロールのサンプルコード

2022-02-02 02:29:45

この記事の例はアプレットで書かれていますが、実現する機能には影響ありません。

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) // Here is the animation time of 15s for 5 images, you can adjust it yourself
    this.setData({
      computedAni: `${time}s rowup linear infinite normal`
    })
  }
})


コードスニペットを見るにはここをクリック

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

水平方向の無限スクロールのサンプルコードを達成するために純粋なCSS3のこの記事は、これに導入され、より関連するCSS3水平方向の無限スクロールの内容は、以前の記事のスクリプトのホームを検索したり、次の関連記事を閲覧し続け、私はあなたが将来的に多くのスクリプトのホームをサポートして願っています!.