JavaScript는 왼쪽 및 오른쪽 제어로 원활한 스크롤을 구현합니다

저자：Eve Cole 업데이트 시간：2025-06-05 18:32:01

원활한 스크롤링은 프로젝트에 종종 사용되는 특수 효과입니다. 인터넷에는 많은 샘플 코드가 있습니다. 여기서는 호환성이 우수한 비교적 간단하고 실용적인 코드를 공유합니다. 신중하게 공부 해주세요.

HTML 코드 :

코드 사본은 다음과 같습니다.

< html>

< head lang = "en">

< meta charset = "utf-8">

< title> 원활한 스크롤 </ title>

< script src = "js/0010.js"> </ script>

< link rel = "스타일 시트"유형 = "text/css"href = "css/0010.css"/>

</ 헤드>

< body>

< a href = "javaScript :"> walk 왼쪽 </ a>

< a href = "JavaScript :"> Walk Right </ a>

< div id = "div1">

< ul>

< li> < img src = "image/1.jpg"> li>

< li> < img src = "image/2.jpg"> li>

< li> < img src = "image/3.jpg"> li>

< li> < img src = "image/4.jpg"> li>

</ ul>

</ div>

</ body>

</ html>

CSS 코드

코드 사본은 다음과 같습니다.

여백 : 0;

패딩 : 0;

}

#div1 {

오버플로 : 숨겨진;

배경 : 파란색;

위치 : 상대;

너비 : 600px;

높이 : 150px;

마진 : 100px 자동;

}

#div1 ul {

위치 : 절대;

왼쪽 : 0px;

상단 : 0px;

목록 스타일 : 없음;

}

#div1 ul li {

플로트 : 왼쪽;

}

#div1 ul li img {

너비 : 150px;

높이 : 150px;

}

JS : 코드

코드 사본은 다음과 같습니다.

Window.onload = function () {

var odiv = document.getElementById ( 'div1');

var oul = odiv.getElementsByTagName ( 'ul') [0];

var ali = oul.getElementsByTagName ( 'li');

var timer = null;

var 속도 = 2; // 스크롤 속도와 방향을 제어합니다

oul.innerhtml = oul.innerhtml+oul.innerhtml;

oul.style.width = ali [0] .offsetwidth*ali.length+'px';

타이머 = setInterval (move, 30);

odiv.onmouseover = function () {// 잠정적 인 마우스

ClearInterval (타이머);

};

odiv.onmouseout = function () {// 마우스 아웃 및 스크롤을 계속하십시오

타이머 = setInterval (move, 30);

}

document.getEmentsByTagName ( 'a') [0] .onclick = function () {

속도 = -2;

}

document.getElementsByTagName ( 'a') [1] .onclick = function () {

속도 = 2;

}

함수 이동 () {// 그림 스크롤

if (oul.offsetleft <-oul.offsetWidth/2) {

oul.style.left = 0;

}

if (oul.offsetleft> 0) {

oul.style.left = -oul.offsetWidth/2+'px';

}

oul.style.left = oul.offsetleft+속도+'px';

}

효과가 그다지 좋지 않습니까?