이 예제는 참조를위한 Seamless Scrolling Effect JavaScript 코드의 구현을 공유합니다. 특정 내용은 다음과 같습니다.]
생식 이미지 :
구현 코드 :
<! doctype html> <html> <head> <meta charset = "gb2312" /> <title> zzzz < /title> <tyle> *{마진 : 0; 패딩 : 0; } body {너비 : 1000px; 마진 : 100px 자동; 배경색 : #fff; } #wrapper {오버 플로 : 숨겨진; 너비 : 600px; 높이 : 100px; 위치 : 상대; } #wrapper ul {위치 : 절대; 왼쪽 : 0; 상단 : 0; } #wrapper li {float : 왼쪽; 목록 스타일 : 없음; } #wrapper li img {너비 : 150px; 높이 : 100px; Border-Radius : 9px; } 입력 [type = button] {마진-탑 : 20px; 너비 : 35px; 높이 : 25px; 라인 높이 : 25px; } </style> <script type = "text/javaScript"> window.onload = function () {var timer = null; var 속도 = 4; var od = document.getElementById ( "래퍼"); var au = od.getElementsByTagName ( 'ul') [0]; var ali = au.getElementsByTagName ( 'li'); au.innerhtml = au.innerhtml+au.innerhtml; au.style.width = ali [0] .offsetwidth*ali.length+'px'; TIMER = setInterVal (move, 30) 함수 move () {if (au.offsetleft <-au.offsetwidth/2) {au.style.left = '0'; } if (au.offsetleft> 0) {au.style.left = -au.offsetwidth/2+'px'; } au.style.left = au.offsetleft+speed+'px'; } od.onmouseOver = function () {clearInterVal (타이머); } od.onmouseout = function () {timer = setInterval (move, 30)} document.getElementByid ( "btn1"). onclick = function () {speed = -4; } document.getElementById ( "btn2"). onclick = function () {speed = 4; }}} </script> </head> <bod> <div id = "래퍼"> <ul> <li> <img src = "img/pic4.jpg"/> </li> <li> <img src = "img/pic3.jpg"/> </li> <li> <img src = "img/pic2.jpg"/> </li> <li> <li> <li> <li> <li> src = "img/pic2.jpg"/> </li> <li> <img src = "img/pic1.jpg"/> </li> </ul> </div> <입력 유형 = "button"name = ""id = "btn1"value = "left"/> <input type = "button"id = "btn2"right "//</ht>연구를 위해 다음 주제를 참조 할 수 있습니다.
"JavaScript 스크롤링 효과 요약", "JQuery 스크롤 효과 요약", "JavaScript 사진 회전식 효과 요약"
위의 내용은이 기사에 관한 모든 것이며, 모든 사람이 JavaScript 프로그래밍을 배우는 것이 도움이되기를 바랍니다.