1。実装原則
（1）すべての写真を親コンテナdivに置き、表示属性を介して写真の外観と隠れを設定します。
（2）カルーセル図は、手動カルーセルと自動カルーセルに分割されます。
マニュアルカルーセルの焦点は、クリックするたびに画像の下の小さな円をクリックし、インデックス番号を取得し、対応するインデックス番号を持つ画像を表示し、この時点での小さな円を強調表示することです。
自動カルーセル：タイマーsetInterval（）を使用して、特定の時間ごとに画像を再生します。
（3）すべての基本知識：DOM操作、タイマー、イベントアプリケーション。
2。CarouselPicture Pageレイアウト：
<div id = "content"> <！ - 合計親コンテナ - > <div> <！ - 写真を含むコンテナ - > <div> <img src = "./ img/lunbo1.jpg"> </div> <div> <img src = "./ img/lunbo2.jpg"> </div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <> <img src = "./ img/lunbo3.jpg"> </div> <！ - 写真の下の表示円 - > <ul> <li id = 'pic1'>●</li> <li id = 'pic2'>●</ul> < href = "＃"> <span >> </span> </a> </div>
3。CSSスタイルのカルーセル図：
#content {width：100％; height：500px; position：relative;}。carousel-inner {position：relative; width：100％; overflow：hidden;高さ：500px; } .carousel-inner> .item> img {display：block; Line-Height：1; z-index：1;}。carousel-indicators {position：aspolute; bottom：10px;左：45％; z-index：2; list-style-type：none;}。カーソル：Pointer; Z-Index：2;}。active1 {font-size：28px; color：#fff;}。carousel-control {carousel-control {aspolty; text-decoration：none; color：＃999; font-weight：bold; opacity：.5; font-size：40px; 3;}。Carousel-Control：Hover {color：fff; Text-Decoration：none; ofacity：.9; outline：none; font-size：42px;}。prev {top：30％;左：20px; } .next {top：30％; right：20px;}4。Carousel図のJS実装コード：
window.onload = function（）{// Carousel Initialization var lunbo = document.getElementById（ 'content'）; var imgs = lunbo.getElementsByTagname（ 'img'）; var uls = lunbo.getElementsBytagname（ 'ul'）; var lis = lunbo.getelementsbytagname（ 'li'）; //初期状態では、サークルはハイライトモードlis [0] .style.fontsize = '26px'; lis [0] .style.color = '#fff'; var pic_index = 1; //自動カルーセル。 pic_timeを使用して再生を記録するには、ClearInterval（）を使用していつでもクリアできます。 var pic_time = setInterval（autobofang、3000）; //マニュアルカルーセルfor（var i = 0; i <lis.length; i ++）{lis [i] .addeventlistener（ "mouseover"、change、false）;} function（event）{var event = event || window.mar target = event.target | | event.target.target. var children = target.parentnode.children; for（var i = 0; i <children.length; i ++）{if（target == children [i]）{picchange（i）; }}} //画像スイッチング関数関数picchange（i）{//すべての写真を表示しないようにし、すべての円は（var j = 0; j <imgs.length; j ++）{imgs [j] .style.display = 'none'; lis [j] .style.fontsize = '24px'; lis [j] .style.color = '＃999';} //選択したインデックスイメージを表示し、対応する円を強調表示します。 lis [i] .style.fontsize = '26px'; lis [i] .style.color = '#fff'; } // Autoplayイベント処理機能autobofang（）{if（pic_index> = lis.length）{pic_index = 0;} change1（pic_index ++;} //自動再生画像機能変化の変換におけるイベント（index）{picchange）; uls [0] .addeventlistener（ "Mouseover"、Pause、False）; // MouseはULタグを自動的に再生し、ULS [0] .AddeventListener（ "MouseOut"、go、false）;} // Autoがポーズ機能を再生する（イベント）{var event || window.var.event.event.event.event.event.event.event.event.event.event.event.event.event.event.event;ターゲット= event.target || event.srcelement; switch（target.id）{case "pic1"：clearinterval（pic_time）; break; case "pic2"：clearinterval（pic_time）; break; case "pic3"：clearinterval（pic_time）; break;}} // auto play play picture continuing function go（var event = event || window.event; var target = event.target || event.srcelement; switch（target.id）{case "pic1"：pic_index = 1; pic_time = setInterval（autobofang、3000）; break; case "pic2"：pic_index = 2; pic_time = setinterval（autobofang、3000）; break; case "pic3"：pic_index = 3; pic_time = setinterval（autobofang、3000）; break;}}}}5。複製画像：
6。遭遇した問題と欠点
問題：マウスが初めてULタグに移動すると、自動カルーセルの画像が停止し、マウスが動き出し、自動カルーセルが続きますが、操作が実行されると、カルーセルの画像がより速く速く変化し、この時点でULタグをクリックしなくなります。
問題の原因：カルーセルを停止した後にタイマーが再度使用される場合、値は録音のためにpic_timeに割り当てられないため、マウスは再びULタグに移動してタイマーをクリアします。したがって、ULタグをもう一度クリックすることは、自動カルーセルの再生を一時停止することはできず、速度はより速く速くなります。
不十分さ：タオバオカルーセルチャートのようなノーリアルスローリングの効果は達成されておらず、左右の矢印のインジケータ効果は完了していません。これらは後の段階で学習され続け、改善し、共有されます。