모두 HAO123 웹 사이트에 익숙합니다. 구체적인 효과에 대해 더 말할 필요는 없습니다. 관심있는 친구는 렌더링을 참조 할 수 있습니다. 다음 편집자는 코드를 구현한다는 아이디어를 공유합니다. 물론 필요에 따라 코드를 적절하게 추가, 수정 및 삭제할 수 있습니다.
키 코드는 다음과 같습니다.
<! docType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> 그림 캐러 셀 </title> <style> .Warp {width : 600px; 높이 : 750px; 위치 : 상대적; 마진 : 30px auto 0; 오버 플로우 : hidden; 750px; 위치 : 절대; 상단 : 0px; 왼쪽 : 0px; 오버플로 : 숨겨진;/*오버 플로우 -x : auto;*/}#box #con {width : 6000px; 높이 : 750px; 오버 플로우 : 숨겨진;}#con img {float : 왼쪽; 왼쪽; 왼쪽 : 600px; 0px; 상단 : 366px; 너비 : 36px; 높이 : 36px; 배경 : URL (images/btnl.png) 0 0 0 0 No-Repeat; cursor;}#btnr {position : right : 0px; 상단 : 366px; 너비 : 36px; 36px; No-Repeat; Cursor;}#num {위치 : 절대; 하단 : 10px; 왼쪽 : 148px; 오버플로 : 숨겨진; 목록 스타일 : none;}#num li {float : 왼쪽; 마진 : 0 5px; font-size : 16px; line-height : 25px; 25px; 중심; 커서 : 포인터;}#num li.select {back src = "images/meinv3.jpg"> <img src = "images/meinv4.jpg"> <img src = "images/meinv5.jpg"> <img src = "images/meinv6.jpg"> </div> <div id = "btnl"</div id = </divr "> id = "num"> <li> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> <li> 5 </li> <li> 6 </li> </ul> </div> <cript> var box = document.getElementById ( 'box'); var con = document.getelemede ( 'con'); imgs = con.getElementsByTagName ( 'IMG'); var btnl = document.getElementById ( 'btnl'); var btnr = document.getElementById ( 'btnr'); var num = document.getElementById ( 'num'); var lis = num.Bar.getElementsByTagName ( 'li'); imgw = imgs [0] .clientWidth; var x = 0; function imgscroll () {// 이미지 스위치 var var start = box.scrollleft; var end = imgw*x; var changes = end-start; var minstep = 0; var maxstep = 30; steplength = change/maxstep; clearinterval (timer2); timer2 = setInterval (function () {minstep ++; // console.log (minstep); if (minstep> = maxstep) {timer2);} start+= stepletgength; box.scrollleft = start;}, 20); i ++) {lis [i] .classname = 'none';} lis [x] .classname = 'select';} function () {// 3 초마다 왼쪽으로 기본 스크롤을 SclearInterval (timer1); timer1 = setInterval (function () {x ++; if (x> = imgs.length); i = 0; i lis.length; i ++) {lis [i] .classname = 'none'; lis [x] .classname = 'select';}}, 3000);} move (// 기본 스크롤 함수를 시작합니다. btnr.onclick = function () {clearinterval (timer1); x ++; if (x> = imgs.length) {x = 0;} imgscroll (); move ();} btnl.onclick = function () {clearinterval (timer1); x-; if (x <0) {x = imgs.length-1;} imgscroll (); move ();} for (var i = 0; i <lis.length; i ++) {lis [i] .index = i; lis [i] .onclick = function () {x = this.index; imgscroll ();}} </script (</ht);위는 편집자가 소개 한 JS 모방 HAO123 내비게이션 페이지의 이미지 회전식 효과입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!