JSを使用して画像Carousel Effectコード（I）を実装する前の記事に基づいて、左右の矢印の応答イベントが追加され、左右の矢印をクリックすると、画像スクロールも作成できます。
JSコードは次のとおりです。
window.onload = function（）{// Carousel Initialization var lunbo = document.getElementById（ 'content'）; var imgs = lunbo.getelementsbytagname（ 'img'）; var uls = lunbo.getelementsbytagname（ 'ul'）; var lis = lunbo.getelementsbyid（ 'lime'）; var '）;' li '）; = document.getElementByid（ 'prev'）; var item = 0; //初期状態では、円はハイライトモードlis [0] .style.fontsize = '26px'; lis [0] .style.color = '#ffff'; imgs [0] .style.display = 'block'; define a am a a am to the fariaia to the fariea farief faliaia to the norge faliabine = 'block'; 1; //自動カルーセル。 PIC_TIMEを使用して再生を記録すると、ClearInterval（）を使用していつでもクリアできます。 var pic_time = setinterval（autobofang、1000）; // autoplayイベント処理機能autobofang（）{if（pic_index> = lis.length）{pic_index = 0;} picchange（pic_index）; pic_index ++;} //マニュアルカルーセルlis [i] .addeventlistener（ "Mouseover"、change、false）;} function change（event）{var event = event || window.event; var target = event.target || event.srcelement; 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'; } //マウスが画像領域に近づくと、自動再生はlunbo.addeventlistener（ "mouseover"、function（）{clearinterval（pic_time）;}、false）を停止します。 setinterval（autobofang、1000）、false）; 2）{item = 0;} else {item+= 1;} picchange（item）;} prev.addeventlistener（ "click"、moveprev、false）; function moveprev（）{if（item == 0）{item = 2;} else {item-= 1;} picchange（項目）;}}}}繁殖図：矢を通過するマウスの繁殖図
マウスが矢印をクリックすると、写真が変わり、下の小さな円も対応する画像の強調効果を示します。
要約：
基本的なカルーセル効果が達成されました。後で行う必要があるのは、コードを簡素化してカプセル化し、運用効率を向上させることです。