효과 : 마우스를 그림으로 옮기고 스크롤링을 중지하고 마우스가 자동으로 스크롤됩니다.
스크롤을 왼쪽 또는 오른쪽 방향으로 조정할 수 있습니다
코드 사본은 다음과 같습니다.
<스타일 유형 = "텍스트/CSS">
* {
여백 : 0;
패딩 : 0;
}
#div1 {
오버플로 : 숨겨진;
너비 : 712px;
높이 : 108px;
마진 : 100px 자동;
위치 : 상대;
배경 : 빨간색;
}
#div1 ul {
위치 : 절대;
왼쪽 : 0;
상단 : 0;
}
#div1 ul li {
플로트 : 왼쪽;
너비 : 178px;
높이 : 108px;
목록 스타일 : 없음;
}
</스타일>
코드 사본은 다음과 같습니다.
<body>
<a href = "javaScript :;"> 도보 왼쪽 </a>
<a href = "javaScript :;"> 오른쪽으로 걸어가 </a>
<div id = "div1">
<ul>
<li>
<img src = "img/seamless scroll/1.jpg"/>
</li>
<li>
<img src = "img/seamless scroll/2.jpg"/>
</li>
<li>
<img src = "img/seamless scroll/3.jpg"/>
</li>
<li>
<img src = "img/seamless scroll/4.jpg"/>
</li>
</ul>
</div>
</body>
위는 간단한 레이아웃이며 다음은 기본 JavaScript 코드입니다.
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
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.offsetWidth / 2) {
oul.style.left = '0';
}
if (oul.offsetleft> 0) {
oul.style.left = -oul.offsetWidth / 2 + 'px';
}
oul.style.left = oul.offsetleft + 속도 + 'px';
}
var timer = 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;
};
}
</스크립트>
아이디어를 간단히 설명하겠습니다.
먼저, UL을 설정합니다. 총 oul.innerhtml += oul.innerhtml에 8 장의 사진이 있습니다.
Li*8의 실제 너비로 UL의 너비를 계산하십시오.
나중에 추가 내용을 숨 깁니다
참고 : oul.offsetleft는 확실히 부정적입니다
그러니 판단 할 때 부정적인 표시를 놓치지 마세요
코드 사본은 다음과 같습니다.
if (oul.offsetleft <-oul.offsetWidth / 2) {
oul.style.left = '0';
}
이 섹션은 그림이 중간에 스크롤하고 사진을 빠르게 다시 당기는 것을 의미합니다. 프로그램이 너무 빨리 실행되므로 원활한 스크롤을 보는 것은 거의 불가능합니다.
마지막으로 가변 속도를 사용하여 왼쪽 및 오른쪽 방향으로 스크롤을 제어하십시오.
위의 코드는 가장 기본적인 기능만을 구현하며 친구들은이를 기반으로 계속 개선 할 수 있습니다.