매끄러운 스크롤링의 개선된 버전은 위, 아래, 왼쪽 및 오른쪽 스크롤(함수로 캡슐화됨)_javascript 기술을 지원합니다.

复主代码 代码如下: 无缝滚动——上下 *{margin:0;padding:0;} li{list-style:none;} img{border:0;} #scroll{width:178px;margin:50px auto;position:relative;} .btn{display:block;width:27px;height:27px;position:absolute;left:75px;} .up{배경:url(images/up.gif);top:0;} .down{배경:url(images/down.gif);top:490px;} .content{높이:440px ;overflow:hidden;position:relative;top:40px;} .content ul{position:absolute;top:0;left:0;} .content li{height:110px;} &lt ;/style> window.onload = function(){ 스크롤('top',1,1000); }; scroll.js：

复主代码 代码如下: /********** 기능: 수평 또는 수직의 원활한 스크롤 구현 매개변수: 방향, 총 4개 값: 왼쪽, 오른쪽, 위쪽, 아래쪽 속도 이동 거리 iTime 이동을 시작하는 데 시간이 얼마나 걸리나요? 쓰지 않으면 로딩 후 페이지가 이동하기 시작합니다 **********/ 함수 스크롤(방향,속도,iTime){ var oDiv = document.getElementById('scroll'); var oUl = oDiv. getElementsByTagName('ul')[0]; var aLi = oDiv.getElementsByTagName('li'); var aBtn = oDiv.getElementsByTagName('a'); var 타이머 = null; var iSpeed = 0; var 플래그 = true; //判断平移动还是垂直移动

oUl.innerHTML = oUl.innerHTML;

스위치(방향){ 케이스 '왼쪽': iSpe 에드 = -속도; oUl.style.width = aLi[0].offsetWidth * aLi.length 'px'; flag = true; break; 대소문자 'right': iSpe 에드 = 속도; oUl.style.width = aLi[0].offsetWidth * aLi.length 'px'; flag = true; break; 케이스 'top': iSpe 에드 = -속도; 플래그 = false; break; 케이스 '하단': iSpeed = 속도; 플래그 = false; break; };

setTimeout(move,iTime);

//左按钮와上按钮 aBtn[0].onclick = function(){ clearInterval(timer); iSpeed = -speed; > iSpeed = 속도; move(); };

oUl.onmouseover = function(){ clearInterval(timer); };

oUl .onmouseout = function(){ move(); };

html 구조는 위 구조와 같아야 한다는 점에 유의하세요.