チームで、私は突然カルーセル画像を実装する方法を尋ねられました。私は1年以上フロントエンドのフィールドにいましたが、長い間自分で書いていません。私はいつもプラグインを使用してダニウに書き込みました。今日は、初心者が学ぶのに適した簡単なチュートリアルを書きます。もちろん、カルーセル図には多くの実装原則と設計パターンがあります。ここで私が話しているのは、プロセス指向の機能プログラミングを使用してそれらを実装することです。オブジェクト指向の設計パターンと比較して、コードは必然的に肥大化して冗長に見えるでしょう。しかし、オブジェクト指向の抽象化の欠如は、初心者が理解して学習するのに非常に適しています。すでにBATにいる学生は、より少ない潮吹きを望んでいます。さらに多くの提案をすることもできます。
カルーセル図の原則：
CSSレイアウトを使用して1つの画像のみを表示し、残りが隠されている、等しいサイズの一連の写真がタイル張りになっています。自動再生は、タイマーを使用してオフセットを計算するか、イベントを手動でクリックして画像を切り替えることで実現されます。
HTMLレイアウト
まず、親コンテナコンテナにはすべてのコンテンツが保存され、子コンテナリストには写真が含まれています。サブコンテナーボタンはボタンドットを保存します。
<div id = "container"> <div id = "list" style = "left：-600px;"> <img src = "img/5.jpg"/> <img src = "img/1.jpg"/> <img src = "img/2.jpg"/> <img src = "img/2.jpg/<" imp "" "/> <img" /> <img src = "img/4.jpg"/> <img src = "img/5.jpg"/> <img src = "img/1.jpg"/> </div> <div id = "buttons"> <span index = "1"> </span> <span> <スパン= </</</</</</</</</</</</</</</</</</</</</スパン<span index = "4"> </span> <span index = "5"> </span> </div> <a href = "javascript :;" id = "prev"> <</a> <a href = "javascript :;" id = "next" >> </a> </div>
最適化、シームレスなスクロール。
最後の画像から最初の画像に切り替えると、大きなギャップがあり、2つの補助画像を使用してこのギャップを埋めます。
シームレスなスクロール、コードを直接見て、最初の写真を配置する前に最後の写真をコピーし、最後の写真の後ろに最初の写真をコピーします。そして、最初の画像の補助画像を非表示にします（実際に実際に表示されている5番目の画像なので、style = "left：-600px;"を設定します）
CSS変更
1。ボックスモデル、ドキュメントフロー、および絶対的な位置決めの問題を理解します。
2。オーバーフローに注意してください：リストの非表示。窓の写真のみを表示し、左側と右側を非表示にします。
3.ボタン内の各スパン層がトップになっていることを確認し、最上部に設定してください。 （Z-Index：999）
* {マージン：0;パディング：0;テキストゼロ：なし;} body {padding：20px;}＃container {width：600px; height：400px; border：3px solid＃333; overflow：hidden; position relative;}＃list {width：4200px; height：400px; posept; z-Index：1; Z-Index：1; {width：600px; height：400px; float：left;}＃bottons {position：aspolute：height：10px; width：100px; z-index：2; botton：20px;左：250px;} 50％;背景：＃333;マージン右：5px;}＃bottons .on {background：orangered;}。arrow {cursor：pointer; display; display：none; line-height：39px; text-align：center; font-size：36px; font-weight：bold：40px; 180px; background-color：rgba（0、0、0、.3）; color：#fff;}。矢印：hover {background-color：rgba（0、0、0、.7）;}＃container：hover .arrow {display：block;}＃prev {left：20px;}JS
まず、最初に、左右の矢印を手動でクリックして画像を切り替える効果があることに気付きます。
window.onload = function（）{var list = document.getelementbyid（ 'list'）; var prev = document.getelementbyid（ 'prev'）; var next = document.getelementbyid（ 'next'）; function animate（offset）{//取得したのはスタイルです。 parseint（）で丸くして、数値に変換します。 var newLeft = parseint（list.style.left） + offset; list.style.left = newLeft + 'px';} prev.onclick = function（）{animate（600）;} next.onclick = function（）{animate（-600）;}}}実行後、右矢印をクリックし続けると空白があり、最初の写真に戻ることができないことがわかります。左矢印をクリックして、最初の画像に戻ります。
Google Chrome F12を使用して、左のオフセットを使用して写真を取得するためです。左の値が3600未満であることがわかったら、8番目の写真がない場合は空白になるので、ここでオフセットを判断する必要があります。
この段落をアニメーション関数に追加します。
if（newLeft <-3000）{list.style.left = -600 + 'px';} if（newLeft> -600）{list.style.left = -3000 + 'px';}OK、実行して、問題ありません。カルーセルの写真は、名前が示すように、あなたが移動できる写真です。現時点では、ブラウザの内蔵オブジェクトタイマーを使用する必要があります。
タイマーの場合、setinterval（）とsetimeoutの違いを説明する必要があります。簡単に言えば、SetInterval（）は複数回実行され、Settimeout（）は1回だけ実行されます。
より具体的な使用については、リンクをクリックして違いを表示できます：window.setInterval window.settimeout。
ここでは、画像をスクロールループする必要があるため、setInterval（）を使用します。下に挿入します
var timer; function play（）{timer = setInterval（function（）{prev.onclick（）}、1500）} play（）;実行、OK！
ただし、特定の画像を注意深く見たい場合は、画像を停止する必要があり、タイマーをクリアするだけです。この方法はここで使用されます。
ここでは、そのDOMを操作し、Carouselマップエリア全体を取得する必要があります。
var container = document.getElementById（ 'container'）; function stop（）{clearInterval（Timer）;} container.onmouseOver = stop; container.onmouseout = play;しかし、ここでは、カルーセルの写真が基本的に完成しており、一部の学生が尋ねるので、とても簡単です。写真の下に小さな点の列が見えましたか？機能を追加しました。
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
これがアップグレードされたバージョンです：
var bottons = document.getElementbyId（ 'bottons'）。getelementsbytagname（ 'span'）; var index = 1; fuction buttonsshow（）{//前のスタイルをクリアする必要があります（var i = 0; i <buttons.length; i ++）{if（buttons [i] .classname = 'on' buttons [i]。 '';}} //配列は0から起動するため、インデックスは-1buttons [index -1] .classname = 'on';} prev.onclick = function（）{index -= 1; if（index = 5;} butonsshow（）; next.onclick = inferict = fenction（600）; 増加。 5つの小さなドットのみがあるため、判断index += 1; if（index> 5）{index = 1;} buttonsshow（）; animate（-600）;}を行う必要があります。今ははるかに正常に思えますが、マウスを使用していつでも小さなドットの1つをクリックして、対応する画像に切り替えたいと思います。同じ原則は、オフセットを通して対応する画像を見つける必要があります。
for（var i = 0; i <buttons.length; i ++）{bottons [i] .onclick = function（）{//最適化し、現在の画像の現在のドットをクリックし、次のコードを実行しないでください。 if（this.classname == "on"）{return;}/* offset get：ここでは、マウスがドットに移動する位置を取得します。これを使用して、インデックスをオブジェクトボタンに結合します[i]、この使用法をGoogleに移動します* // parseint（this.getattribute（ 'index'））; var offset = 600 *（clickindex -index）; animate（offset）; //マウスクリック後に位置を保存し、通常のインデックスとしてドットを表示するためにドットを表示= clickindex;};}}}みんな、このカルーセルの写真が少し奇妙で予測不可能であることを発見したかもしれません。それは左に切り替えられるので、書き直してください：
function play（）{//カルーセル画像を切り替えて画像を右に切り替えます= setinterval（）{next.onclick（）;}、2000）} <！doctype html> <html> <head>なし;} body {padding：20px;}＃container {width：600px; height：400px; border：3px solid＃333; overflow：hidden; position：lister;}＃list {width：4200px; height：400px; position：absolute; z-index：1;}左;}＃ボタン{位置：絶対;高さ：10px;幅：100px; z-index：2; bottom：20px;左：250px;}＃ボタンスパン{cursor：pointer; float：left; border：1px solid #fff; width：10px; 5px;}＃bottons .on {background：orangered;}。arrow {cursor：cursor：pointer; display：none; line-height：39px; text-align：center; font-size：36px; font-weight：bold; width：40px; height：40px; position：buctionute：2; z-index：2; 0、.3）; color：#fff;}。矢印：hover {background-color：rgba（0、0、0、.7）;}＃container：hover .arrow {display：block;}＃prev {left：20px;}イベント*//*タイマー*/window.onload = function（）{var container = document.getElementById（ 'container'）; var list = document.getElementById（ 'list'）; var botutons = document.getElementById（ 'bottons'）。 document.getElementById（ 'next'）; var index = 1; var timer; var timer; function animate（offset）{// left.leftは左に相対的に得られる距離です。 var newLeft = parseint（list.style.left） + offset; list.style.left = newLeft + 'px'; // Infinite Scrolling Judgement if（newLeft> -600）{list.style.Left = -3000 + 'px';} if（newleft <-3000）{list.Style.Left = -600 + 'Px'; play（）{// repeated execution timer = setinterval（function（）{next.onclick（）;}、2000）} function stop（）{clearinterval（timer）;} function buttonsshow（）{//前の小さなドットのスタイルをクリアします。 {buttons [i] .classname = "";}} //配列は0から始まるので、インデックスは-1buttons [index -1] .classname = "on";} prev.onclick = function（）{index -= 1; if（index <1）{index = 5} butonshow（）上記のタイマーの効果のために、インデックスは増加し続けます。 5つの小さなドットのみがあるため、判断index+= 1; if（index> 5）{index = 1} animate（-600）; buttonsshow（）;}; for（var i = 0; i <buttons.length; i ++）{buttons [i] anclick = function（）{/culd expent in codut if（this.classname == "on"）{return;}/*ここでは、マウスがドットに移動する位置を取得します。これを使用してインデックスをオブジェクトボタン[i]に結合します[i]に移動します* //*ここではカスタム属性であるため、dom2レベルのメソッドを使用する必要があります。 parseint（this.getattribute（ 'index'））; var offset = 600 *（clickindex -index）; //このインデックスはindexanimate（offset）です。 index = clickindex; //マウスクリック後に位置を保存し、それを使用してdotsshow（）;}} container.onmouseover = stop; contain.onmouseout = play; play（）;} </script> </head> <body> <div id = "container"> <div id = "list" "style ="左：-600px; src = "img/1.jpg"/> <img src = "img/2.jpg"/> <img src = "img/3.jpg"/> <img src = "img/4.jpg"/> <img src = "img/5.jpg"/> <img src = "img/5.jpg"/< src = "img/2.jpg"/> <img src = "img/3.jpg"/> <img src = "img/4.jpg"/> <img src = "img/5.jpg"/> <img src = "img/1.jpg"/> </div div div div div div id = </</</</</</</</</</<スパンindex = "2"> </span> <span index = "3"> </span> <span index = "4"> </span> <span index = "5"> </span> </div> <a href = "javascript :;" id = "prev"> </a> <a href = "javascript :;" id = "next" >> </a> </div> </body> </html>上記は、編集者が紹介した単純なJS Carouselコードです。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！