이 기사의 예는 JS를 사용하여 참조를 위해 버튼으로 제어되는 일시 정지 효과로 이미지 스크롤을 달성합니다. 특정 내용은 다음과 같습니다
<! docType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> Seamless Scroll 2 </title> <style> #Warp {width : 1250px; 높이 : 300px; 오버플로 : 숨겨진; 마진 : 100px auto 0; 오버 플로우 -X : 자동; } #warp #con {너비 : 4000px; 높이 : 300px; 오버플로 : 숨겨진; } #warp #con #box1 {float : 왼쪽; 오버플로 : 숨겨진; } #warp #con #box2 {float : 왼쪽; 오버플로 : 숨겨진; } #Warp img {float : 왼쪽; 마진 오른쪽 : 10px; 너비 : 200px; 높이 : 300px; } .btn {텍스트-정렬 : 중심; 마진-탑 : 10px; } .BTN 버튼 {font-size : 16px; } </style> </head> <body> <div id = "warp"> <div id = "con"> <div id = "box1"> <img src = "images/meinv1.jpg"> <img src = "images/meinv2.jpg"> <img src = "images/meinv3.jpg"> <image src = "image/meinv4. <img src = "images/meinv5.jpg"> <img src = "images/meinv6.jpg"> </div> <div id = "box2"> </div> </div> </div> <div> <버튼 id = "scroll"> << scroll left </button> <scrollr "> Scroll Right >> Warp = document.getElementById ( 'Warp'); var con = document.getElementById ( 'con'); var box1 = document.getElementById ( 'box1'); var box2 = document.getElementById ( 'box2'); var img = box1.getElementsByTagName ( 'IMG') [0]; var scrolll = document.getElementById ( 'scrolll'); var scrollr = document.getElementById ( 'scrollr'); var timer1 = null, timer2 = null, flage = 1; box2.innerhtml = box1.innerhtml; max = box1.clientwidth; imgmax = img.clientWidth+10; 함수 scrollleft () {flag = 1; ClearInterval (Timer1); timer1 = setInterval (function () {warp.scrollleft ++; if (warp.scrollleft> = max) {warp.scrollleft = 0;} if (warp.scrollleft%imgmax == 0) {clearinterval (timer1); stimer2 = settimeout () (함수 (함수) Timer1 = setInterVal (Scrollleft, 5)}, 2000)}}, 5)} 함수 scrollright () {flag = 0; ClearInterval (Timer1); timer1 = setInterval (function () {warp.scrollleft--; if (warp.scrollleft <= 0) {warp.scrollleft = max;} if (warp.scrollleft%imgmax == 0) {clearinterval (timer1); stimer2 = settimeout (function () {function (). TIMER1 = SetInterVal (Scrollright, 5)}, 2000)}}, 5)} scrollleft (); scrolll.onclick = function () {// clearinterval (timer1); // cleartimeout (timer2); scrollleft (); } scrollr.onclick = function () {// clearinterval (timer1); // cleartimeout (timer2); scrollright (); } warp.onmouseEnter = function () {clearInterVal (timer1); 클리어 타임 아웃 (Timer2); } warp.onmouseleave = function () {clearinterval (timer1); 클리어 타임 아웃 (Timer2); Console.log (Flage); if (flage) {scrollleft ();} else {scrollright ();}} </script> </body> </html>이 효과의 특정 효과는 마우스를 위로 올리고 스크롤 한 다음 스크롤하는 것입니다. 스크롤 할 때는 사진을 하나씩 스크롤하는 것입니다. 즉, 2 초 동안 사진을 스크롤 한 후 다음 그림을 중지하고 스크롤하기 시작합니다. 특정 콘텐츠에 대한 코드를 참조하십시오.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.