Javascript는 Images_javascript 기술의 원활한 스크롤을 실현합니다.

효과: 마우스를 그림 안으로 이동하면 스크롤이 중지되고, 마우스가 그림 밖으로 이동하면 자동으로 스크롤됩니다

왼쪽 또는 오른쪽 방향으로 스크롤 조정 가능

코드 복사 코드는 다음과 같습니다. * { 여백: 0; 패딩: 0; } #div1 { 오버플로: 숨김; 너비: 712px; 높이: 108px; 여백: 100px 자동; 위치: 상대; 배경: 빨간색; } #div1 ul { 위치: 절대; 왼쪽: 0; 상단: 0; } #div1 ul li { 부동: 왼쪽; 너비: 178px; 높이: 108px; 목록 스타일: 없음; } >

코드 복사 코드는 다음과 같습니다.

왼쪽으로 이동> 오른쪽으로 이동> ~ > & Lt; img src = "IMG/끊김없는 스크롤 /1.jpg"/& gt; > > > > > > > > > > > > >

위는 간단한 레이아웃이고, 아래는 주요 자바스크립트 코드입니다

코드 복사

코드는 다음과 같습니다. window.onload = function() { var oDiv = document.getElementById("div1"); var oUl = oDiv.getElementsByTagName('ul')[0]; var aLi = oUl.getElementsByTagName('li'); var 속도 = 2; oUl.innerHTML = oUl.innerHTML; oUl.style.width = aLi[0].offsetWidth * aLi.length 'px'; 함수 이동() { if (oUl.offsetLeft oUl.style.left = '0'; } if (oUl.offsetLeft > 0) { oUl.style.left = -oUl.offsetWidth / 2 'px'; } oUl.style.left = oUl.offsetLeft 속도 'px'; } var 타이머 = setInterval(move, 30); oDiv.onmouseover = function() { ClearInterval(타이머); }; oDiv.onmouseout = function() { 타이머 = setInterval(move, 30); }; document.getElementsByTagName('a')[0].onclick = function() { 속도 = -2; }; document.getElementsByTagName('a')[1].onclick = function() { 속도 = 2; }; } 简单讲下思路：

현재의 크기는 80%입니다. 后将 多余的内容隐藏

注意 ： oUl.offsetLeft 肯정是负值

所以判断时候不要把负号漏掉

复主代码 代码如下: if (oUl.offsetLeft oUl.style.left = '0'; }

이 단락은 사진이 반쯤 스크롤되었음을 의미합니다. 프로그램이 너무 빨리 실행되어 원활한 스크롤을 달성하기에는 거의 보이지 않기 때문에 사진을 빠르게 뒤로 당깁니다.

마지막으로 가변 속도를 사용하여 왼쪽 및 오른쪽 방향의 스크롤을 제어합니다.

위 코드는 가장 기본적인 기능만을 구현한 것이며 이를 바탕으로 친구들은 계속해서 발전해 나갈 수 있습니다.