階層レベルを使用して画像の変更を実現するための JavaScript のコードの詳細な説明

カルーセル画像は将来のアプリケーションでも比較的一般的であり、実装するために多くのコード行を必要としません。しかし、js の基本的な知識だけを習得した場合、より少ない論理的に単純な方法を使用してそれを達成するにはどうすればよいでしょうか?いくつかの異なるアプローチを分析してみましょう:

1. ディスプレイスメント法を使用して

まず、本文に p を追加し、幅をパーセンテージ (アダプティブ ページ) に設定します。比率は誰に対して相対的になります。パーセンテージは必要に応じて変更できるため、ここでは詳しく説明しません。 pに写真を入れてください。

次に、スタイル部分で、位置決めを容易にするためにすべての img タグを絶対に設定します

最後に、js 部分はロジックについて説明し、最初の配列はページに表示される初期画像を保存するために使用され、エントリを待ち、2 番目の配列に残りの n 個のピクチャが格納されているとします。実行が完了すると、showFirst が goOut の最後に配置されます。このとき、waitToShow 配列の 0 番目の要素は次のようになります。表示される元の 2 番目の画像を指定します。 waitToShow[0] は変位と移動時間を設定し、goOut 配列の最初の要素画像をポップアウトし、waitToShow 配列が確実に実行されるように waitToShow 配列の最後に置きます。は常に表示されるピクチャと表示されるピクチャであるため、2 つの配列によってループが形成され、カルーセル チャートの実装が完了します。逆のロジックも同じです (ロジックが複雑すぎるため、ここではお勧めしません)

2. 階層のレベルを使用してトップ画像を変更します

より直感的な点については、コードに直接アクセスしてください。基本的に、すべての行にコメント

りー

以上が階層レベルを使用して画像の変更を実現するための JavaScript のコードの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。