원칙:
1. ul을 문서 스트림과 분리하고 왼쪽으로 설정하고 그림을 UL에 넣고 "이동"함수를 작성하고 기능 함수는 UL의 왼쪽 왼쪽으로 긍정적 인 속도로 실행할 수 있습니다.
2. "이동"기능이 30 밀리 초마다 실행되도록 타이머를 설정합니다 (변수 매개 변수)
3. UL의 길이는 "실행"이기 때문에 UL의 내용, 즉 IMG는 두 배가 될 수 있습니다.
oul.innerhtml += oul.innerhtml;
4.이 시점에서 UL의 내용이 증가하기 때문에 폭이 증가하고 실제 프로젝트에 따라 표시된 그림의 수가 변경되거나 불확실 할 수 있습니다.
oul.style.width = oli.length*oli [0] .offsetWidth+'PX';
5. "이동"함수에 코드를 추가하십시오.
5.1 현재 UL은 오른쪽으로 이동합니다. UL이 OffSetLeft> 0이면 UL을 왼쪽 "UL의 절반"으로 당겨 UL은 제한없이 오른쪽으로 이동할 수 있도록합니다.
if (oul.offsetleft> 0) {oul.style.left = -oul.offsetwidth/2+'px';}5.2 UL이 왼쪽으로 이동하고 OffsetLeft가 UL 폭의 절반을 실행하면 전체 UL을 초기 왼쪽으로 다시 당깁니다. 0;
if (oul.offsetleft <-oul.offsetWidth/2) {oul.style.left = 0; }코드 :
HTML :
<div id = "box"> <ul> <li> <a href = "#"#"> <img src ="1.jpg "/> </a> </li> <li> <a href ="#"> <img src ="2.jpg "/> </a> </li> <li> <a href ="#"> <img src =. /> </a> </li> <li> <a href = "#"> <img src = "3.jpg"/> </a> </li> </div>
CSS :
* {마진 : 0; 패딩 : 0;} #box {너비 : 480px; 높이 : 110px; 테두리 : 1px 빨간색 고체; 마진 : 100px 자동; 오버플로 : 숨겨진; 위치 : 상대; } #box ul {위치 : 절대; 왼쪽 : 0; 상단 : 5px;} #box ul Li {List 스타일 : 없음; 플로트 : 왼쪽; 너비 : 100px; 높이 : 100px; 왼쪽 패딩 : 16px; } #box ul li img {너비 : 100px; 높이 : 100px;}JS :
<cript> wind var oul = odiv.getElementsByTagName ( 'ul') [0]; var oli = oul.getElementsByTagName ( 'li'); var aa = document.getElementsByTagName ( 'a'); var ispeed = 10; // oul.innerhtml += oul.innerhtml을 이동하는 속도가 높아집니다. oul.style.width = oli.length*oli [0] .offsetWidth+'PX'; aa [0] .onclick = function () {ispeed = -10; }; aa [1] .onclick = function () {ispeed = 10; }; 함수 fnmove () {if (oul.offsetleft <-oul.offsetwidth/2) {// 음수는 ul의 왼쪽이 음수 oul.style.left = 0이기 때문입니다. } else if (oul.offsetleft> 0) {oul.style.left = -oul.offsetwidth/2+'px'; } oul.style.left = oul.offsetleft+ispeed+'px'; // 전체 UL이 오른쪽으로 이동합니다}; var timer = null; ClearInterval (타이머); 타이머 = setInterval (fnmove, 30); oul.onmouseover = function () {clearinterval (타이머); }; oul.onmouseout = function () {timer = setInterval (fnmove, 30); // 마우스가 멀리 이동하면이 타이머를 실행합니다}; }; </스크립트>오류가 있으면 수정하십시오.
위의 원활한 스크롤링 간단한 구현 코드 (권장)는 내가 공유하는 모든 컨텐츠입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.