이 기사에서는 JS를 사용하여 참조를 위해 일반 웹 사이트의 홈페이지에 회전식 효과를 만드는 특정 코드를 공유합니다. 특정 내용은 다음과 같습니다
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> 그림 회전식 </title> <style> .Warp {너비 : 600px; 높이 : 750px; 위치 : 상대; 마진 : 30px auto 0; 오버플로 : 숨겨진; } #box {너비 : 600px; 높이 : 750px; 위치 : 절대; 상단 : 0px; 왼쪽 : 0px; 오버플로 : 숨겨진; /*오버 플로우 -x : 자동;*/} #box #con {너비 : 6000px; 높이 : 750px; 오버플로 : 숨겨진; } #con img {float : 왼쪽; 너비 : 600px; 높이 : 750px; } #btnl {위치 : 절대; 왼쪽 : 0px; 상단 : 366px; 너비 : 36px; 높이 : 36px; 배경 : URL (images/btnl.png) 0 0 비 반복; 커서 : 포인터; } #btnr {위치 : 절대; 오른쪽 : 0px; 상단 : 366px; 너비 : 36px; 높이 : 36px; 배경 : URL (images/btnr.png) 0 0 비 반복; 커서 : 포인터; } #num {위치 : 절대; 하단 : 10px; 왼쪽 : 148px; 오버플로 : 숨겨진; 목록 스타일 : 없음; } #num li {float : 왼쪽; 여백 : 0 5px; 글꼴 크기 : 16px; 라인 높이 : 25px; 높이 : 25px; 너비 : 25px; 배경 : #CCC; 텍스트 정렬 : 센터; 커서 : 포인터; } #num li.select {background-color : green; 색상 : 흰색; } </style> </head> <body> <div> <div id = "box"> <div id = "con"> <img src = "images/meinv1.jpg"> <img src = "images/meinv2.jpg"> <img src = "images/meinv3.jpg"> img src = "images/meinv.jpg"> src = "images/meinv5.jpg"> <img src = "images/meinv6.jpg"> </div> </div> <div id = "btnl"> </div> <div id = "btnr"> </div = "num"> <li> 1 </li> 2 </li> <li> <li> <li> <li> <li> <li> 5 </li> <li> 6 </li> </div> <cript> var box = document.getElementById ( 'box'); var con = document.getElementById ( 'con'); var imgs = con.getElementsByTagName ( 'IMG'); var btnl = document.getElementById ( 'btnl'); var btnr = document.getElementById ( 'btnr'); var num = document.getElementById ( 'num'); var num = document.getElementById ( 'num'); var num = document.getElementById ( 'num'); var btnr = document.getElementById ( 'num'); var num = document.getElementById ( 'num'); var num = document.getElementById ( 'num'); var lis = num.getElementsByTagName ( 'li'); var timer1 = null, timer2 = null; var imgw = imgs [0] .ClientWidth; var x = 0; 함수 imgscroll () {// 이미지 스위치 var start = box.scrollleft; var end = imgw*x; var change = 종료 시작; var minstep = 0; var maxstep = 30; var steplength = Change/MaxStep; ClearInterval (Timer2); timer2 = setInterVal (function () {minstep ++; // console.log (minstep); if (minstep> = maxstep) {clearInterval (timer2);} start+= steplenger; box.scrollleft = start;}, 20) for (var i = 0; i <lis.length; i ++) {lis [i] '. } lis [x] .className = 'select'; } function mak () {// 3 초마다 왼쪽으로 기본 스크롤을 SclearInterval (timer1); timer1 = setInterVal (function () {x ++; if (x> = imgs.length) {x = 0;} imgscroll (); for (var 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 (); 이동하다(); } btnl.onclick = function () {clearinterval (timer1); 엑스--; if (x <0) {x = imgs.length-1; } imgscroll (); 이동하다(); } for (var i = 0; i <lis.length; i ++) {lis [i] .index = i; lis [i] .onclick = function () {x = this.index; imgscroll (); 이동하다(); }} </script> </body> </html>특정 효과는 HAO123 내비게이션 페이지 사진 회전 목마의 효과를 기반으로합니다. 웹 사이트로 이동하여 참조 할 수 있습니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.