カルーセル図は、将来のアプリケーションでは依然として比較的一般的であり、コードの多くのラインなしで実装できます。しかし、JSの基本的な知識のみを習得した場合、どのようにして、より少ない単純な論理的方法を使用してそれを達成できますか？ここにいくつかの異なるプラクティスがあります：
1.変位方法を使用して達成します
まず、ボディにDIVを追加して、幅をパーセンテージ（適応ページ）に設定できます。割合がどの割合に関連しているかに固有の場合、ニーズに応じて行います。ここではあまり言いません。画像をDivに入れます。
第二に、スタイルパーツはすべてのIMGタグを絶対に設定してポジショニングを容易にします
最後に、JSパートはロジックについて語り、2つの空の配列を定義します。最初の配列は、ページに表示された最初の画像と入力を待っている画像を保存するために使用され、2番目の配列は残りのn写真を保存します。これらの2つの配列が次のように設定されていると仮定します。waittoshow= [];およびgoout = []; waittoshow.shift（）;最初の画像の名前がshowfirstという名前で、showfirst画像に変位と移動時間が設定されている場合。実行が完了したら、showfirstをゴートアウトの尾に入れます：goout.push（showfirst）;この時点で、Waittoshowアレイの0番目の要素が表示される元の2番目の画像になります。この写真の変位と移動時間を設定し、waittoshow [0]を設定し、ゴートアレイの最初の要素写真をポップアップし、waittoshowアレイの尾に入れて、waittoshowアレイが常に表示されている画像と表示される画像であることを確認します。このようにして、2つの配列はループを形成して、カルーセル画像の実装を完了します。逆ロジックは同じです（ロジックが複雑すぎるため、ここではお勧めしません）
2。階層のレベルを使用して一番上の画像を変更する方法（この方法には変位アクションがありませんが、ロジックは非常にシンプルで実用的です）
直接コードする方が直感的です：基本的にすべての行にコメントがあります
<！Doctype html> <HTML> <ヘッド> <メタcharset = "utf-8"> <title>カルーセル図（フラッシュアダプティブ）</title> <style media = "screen">* {margin：0; padding：0;}。 Absolute;/*z-index：10;*/} input {border：1px solid lightgray; width：50px; height：30px; background：red; border-ladius：5px; font-size：20px;} </style> </head> <body> <div> <img src = "img/01.jpg/02. < /> <img src = "img/03.jpg"/> <img src = "img/04.jpg"/>> </div> <入力タイプ= "ボタン" Id = "butleft" name = "name" value = "文字列アレイを生成する画像要素。文字列アレイはプッシュポップスプライスやその他の操作を実行できない// 1000; //空の配列を取得して文字列要素を画像に保存するvar images = []; //ループの場合は画像配列に値を割り当て、（var i = 0; i <images.length; i ++）{images [i] = images [i]; var currentimage = images [i];画像が高いほど、レベル設定が高くなるため、画像は1枚目と2番目の画像から順番になります。 = images.shift（）; //ポップされた画像要素のレベル、つまり-1000 + count、//他の要素と比較してレベルを最小にすると、アレイの頭の頭にポップアップされた画像がshowfirst.zindex = -index + count; 1、特定の値を考慮しないでください。イベントと1カウント++をクリックするだけです;} //右にイベントをクリックしますbutright.onclick = function（）{//画像の尾から要素をポップアップし、showfirstvar showfirst.pop（）; +count; //レベルが変更された後、それを配列画像画像のヘッドに挿入します。Basic JS（Click Event Carouselの単純な実装）に関する上記の必須記事は、私があなたと共有するすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。