javascript 別画像スクロール切り替えエフェクト idea_javascript スキル

まず最も一般的なアイデアについて説明します。

写真を ul などで囲み、float を設定します。次に、ul 自体を絶対として配置し、その親タグを相対として配置するように設定します。 ul の左または上の値を設定することで、画像キューのスクロール効果が実現します。

機能:

1 つの HTML 要素 (つまり、上記の ul) のみを操作し、システムのオーバーヘッドが低い; 最後までスクロールするとロールバックが発生します。大きいシーケンス番号から小さいシーケンス番号にスクロールすると、最後のシーケンス番号から最初のシーケンス番号までスクロールすると、「シューッ」という音とともに途中の画像がすべて通過します。 。

もう 1 つのアイデアは、XScroll.js で実装したアイデアです。すべての画像は絶対位置を使用します。詳細については、その記事を参照してください。

XScroll.js は完成後、基本的に 2 つの画像を同時に操作して画像切り替えを実装するため、システム消費が問題だと常々感じていました。そのため、合理化されたバージョンを書きたかったのですが、記事の冒頭で述べた最も一般的なバージョンは望ましくありませんでした。

その後、Tudou 女性チャンネルで画像スクロールの切り替えを実装するための別のアイデアを偶然発見しました。

彼の特徴は次のとおりです:

どのシリアル番号からどのシリアル番号にジャンプしても、1 ステップしかスクロールしません。たとえば、1 から 2 にジャンプしたり、1 から 3 にジャンプしたりしても、1 ステップだけスクロールします。途中に他の画像があっても、もちろん表示されません。最後まで来るとロールバックされますが、ロールバックは 1 ステップだけです。

この効果は素晴らしそうです。彼の HTML を調べたところ、実装は私の XScroll.js よりもはるかに簡単であることがわかりました。