注釈付きのフェードインおよびフェードアウト画像カルーセル プラグインの作成方法を段階的に説明します (1)_JavaScript スキル

数日前、blueIdea http://bbs.blueidea.com/thread-2911266-1-1.html でフェードインとフェードアウトの注釈付き画像カルーセル効果を見つけて、その作者のコードを見ました。効果は得られましたが、いくつか意見が異なります。

1. 作者のアイデアは、実際の画像リストを非表示にして、新しい div を作成し、現在の画像を継続的にプッシュすることです。画像をそのdivのinnerHTMLに追加してみましょう。このアイデアはやや新しいものではありますが、ターゲット エフェクトの操作ロジックの観点から見ると、リスト要素の z-index 値を変更することによる交互変換の方が、実際にはこのエフェクト ロジックの本来の意図に沿っています。

2. 作成者はコードをある程度カプセル化しましたが、カプセル化はまだあまり良くなく、効果は 1 つだけであり、十分に設定することはできません。設定可能なプラグイン。

(追伸：上記の意見はあくまで事実に基づいたものであり、著者の技量に疑いの余地はありません。人によって意見は異なります。あくまで個人的な意見です。)

したがって、これも時間をかけて自分で書きました。同様の効果があり、ある程度カプセル化されていますが、軽量のネイティブ プラグインとしかみなされませんが、それでも共有し、ステップバイステップのチュートリアルを提供します。 、困っている友達に少しでも助けてあげたいと思っています。まずは最終的なレンダリングを見てみましょう:

さて、行きましょう!最初の部分を始めましょう!
最初の部分で達成したい目標は次のとおりです:
1. 変換ロジックを実装するための大規模なフレームワークを確立し、将来の機能拡張のための強固な基盤を築くための適切なコード構造を確立します。 (良いスタートは戦いの半分です!)
2. 最初の部分で達成される効果は、写真の自動切り替えです (この機能のみ)。
まず第一に、この効果を実現するには、初期化関数 init()-->init() を呼び出して、最初の画像から次の画像への変換を開始する必要があります。この関数を仮決定します 関数は pos() --> 自動交互変換を実現するには、必ず自動変換関数が必要です function auto() --> auto() の自動変換には、前方向と前方向の 2 つの方向がある必要があります。暫定的に、move()-->move() で上向きまたは下向きの変換を指定して、変換関数 pos() に戻ることもできます。
そして、完全かつ実現可能な論理システムを確立しました。上記のロジックに基づいて、コード構造を使用して次のように表現します。