この記事の例はすべて小さなプログラムで書かれていますが、実装される機能には影響しません。 wxml ループ画像の最初と最後がつながるように、画像を含むボックスのコピーをもう1つ作成します。 <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 class="imgItem dis-flex" style="animation: {{computedAni}};"> <image src="../img/{{index + 1}}.jpg" wx:for="{{images}}" mode="aspectFill" wx:key="index"></image> </ビュー> </ビュー> wxss .dis-flex { ディスプレイ: フレックス; ディスプレイ: -webkit-flex; } .スクロールボックス{ マージン: 30px; テキスト配置: 中央; 境界線: 1px 青 高さ: 220rpx; アイテムの位置を中央揃えにします。 オーバーフロー: 非表示; } .imgアイテム{ アニメーション: 24 秒の rowup 線形無限通常; } .imgItem 画像 { 幅: 200rpx; 高さ: 200rpx; マージン: 0 20rpx; } @keyframes 行アップ { 0% { -webkit-transform: translate3d(0, 0, 0); 変換: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(-100%, 0, 0); 変換: translate3d(-100%, 0, 0); } } @-webkit-keyframes rowup { 0% { -webkit-transform: translate3d(0, 0, 0); 変換: translate3d(0, 0, 0); } 100% { 変換: translate3d(-1000px, 0, 0); 変換: translate3d(-1000px, 0, 0); } } js 速度を調整する鍵は、ループされるアイテムの数によってアニメーション時間が動的に制御されることです。 ページ({ データ: { 画像: 新しい配列(4)、 計算されたアニ: '' }, onLoad: 関数 () { this.setAniSpeed(this.data.images.length) }, setAniSpeed(数値) { let time = Math.ceil(num / 5 * 15) // ここでは、画像が 5 枚ある場合のアニメーション時間は 15 秒です。自分で調整できます this.setData({ computedAni: `${time}s rowup 線形無限通常` }) } }) コードスニペットを表示するにはここをクリックしてください https://developers.weixin.qq.com/s/4gGngEm67Zlh 純粋な CSS3 で水平無限スクロールを実装するサンプルコードに関するこの記事はこれで終わりです。CSS3 水平無限スクロールに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: Docker を使用して開発環境を構築する方法 (Windows および Mac)
>>: HTML a タグの href 属性を使用して相対パスと絶対パスを指定する方法
この例の Web カラー ピッカー機能は、ページ効果を実現するために CSS3 を使用します。つまり...
目次Docker-Maven-プラグインMavenプラグインの自動デプロイメント手順1. ホストマシ...
目次不規則なフォームの実装透明な部分をクリックする不規則なフォームの実装ここでは円形フォームを実装し...
ディスク領域の管理は、システム管理者にとって重要な日常的なタスクです。ディスク領域が使い果たされると...
序文ほとんどの人は、システム ディスク ストレージが少ないときにこの操作を実行するか、Linux シ...
目次問題の原因:解決:解決:私は Centos7 を使用しています (理論的にはこの方法は Cent...
序文MySQL クラスターを構築する場合、当然のことながら、データの一貫性を確保するために、データベ...
mysqlのリモートアクセス権を有効にするデフォルトでは、MySQL ユーザーにはリモート アクセ...
目次序文実装のアイデア実装コード成果を達成する序文これは、テーブルを動的に追加する例です。[追加] ...
1. スタイルシートの先頭にコメント ブロックを追加して、スタイルシートの作成日、作成者、タグ、その...
HTML テーブルを使用する場合、行間隔を変更する必要がある場合がありますが、余白、パディング、折り...
この記事では、ネイティブ JS で実装されたデジタル時計エフェクトを紹介します。エフェクトは次のとお...
フォームのコードは図の通りです。スタイルシートがまだ追加されていないため、フォームが整列されておらず...
1. 背景多くのブログや記事を読みましたが、JVM のメモリ割り当て方法に関する包括的な記事は見つか...
序文この記事は主に、MySQL で浮動小数点型を文字型に変換するときに発生する問題を紹介します。これ...