js를 사용하여 이미지 회전식 효과 코드 (i)를 구현하기 위해 이전 기사를 기반으로 왼쪽 및 오른쪽 화살표의 응답 이벤트가 추가되고 왼쪽 및 오른쪽 화살표를 클릭하면 그림 스크롤을 만들 수 있습니다.
JS 코드는 다음과 같습니다.
Window.onload = function () {// 회전 목마 초기화 var lunbo = document.getElementById ( 'content'); var imgs = lunbo.getElementsByTagName ( 'img'); var uls = lunbo.getElementsByTagName ( 'ul'); var lis = lunbo.getElementsByTagname ( 'li'); document.getElementById ( 'next'); var prev = document.getElementById ( 'prev'); var item = 0; // 초기 상태에서 원은 하이라이트 모드에 있습니다. 그림의 순서 var pic_index = 1; // 자동 회전 목마. pic_time을 사용하여 재생을 기록하면 ClearinterVal ()을 사용하여 언제든지 지울 수 있습니다. var pic_time = setInterVal (Autobofang, 1000); // 자동 재생 이벤트 처리 기능 Autobofang () {if (pic_index> = lis.length) {pic_index = 0;} picchange (pic_index); pic_index ++;} // 매뉴얼 carousel for (var i = 0; i ++). lis [i] .adeventListener ( "마우스 오버", Change, False);} 함수 변경 (이벤트) {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';} // 선택한 인덱스 이미지 디스플레이를 표시하고 해당 원이 IMGS로 강조 표시됩니다 [i] .Style.display = 'block'; lis [i] .style.fontsize = '26px'; lis [i] .style.color = '#fff'; } // 마우스가 이미지 영역에 가까워지면 자동 재생은 Lunbo.addeventListener ( "MouseOver", function () {clearinterVal (pic_time);}, false)를 중지합니다. // 마우스가 이미지 영역에서 벗어날 때 자동 재생은 lunbo.addeventListener ( "mouseout", function ", function" setInterval (Autobofang, 1000), false); // 리버스 화살표 클릭 이벤트는 다음 클릭 이벤트와 함께 연속적으로 변경됩니다. 2) {item = 0;} else {항목+= 1;} picchange (item);} prev.adeventListener ( "click", moveprev, false); 함수 moveprev () {if (item == 0) {item = 2;} else {item- = 1;} picchange (Item);}}.복제 다이어그램 : 화살표를 통과하는 마우스의 재생 다이어그램
마우스가 화살표를 클릭하면 그림이 바뀌고 아래의 작은 원에는 해당 그림의 강조 표시 효과도 표시됩니다.
요약 :
기본 회전 목마 효과가 달성되었습니다. 나중에 수행해야 할 것은 코드를 단순화하고 캡슐화하고 운영 효율성을 향상시키는 것입니다.