원칙:
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> <li> <a href ="#"> <img src ="4.jpg "/> </a> </li> </ul>
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 // 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;}; function fnmove () {if (oul.offsetleft <-oul.offsetwidth/2) {// ult는 ult가 음수 oult.styf. if (oul.offsetleft> 0) {oul.style.left = -oul.offsetwidth/2+'px'; } oul.style.left = oul.offsetleft+ispeed+'px'; // 전체 UL이 오른쪽으로 이동}; var timer = null; ClearInterVal (Timer); Timer = SetInterVal (fnmove, 30); oul.onMouseOver = function () {ClearInterVal (타이머);}; oul.onMouseOut = function () {Timer = setInterVal (fnmove, 30); // 마우스가 멀리 이동하면이 타이머를 실행합니다};}; </script>위의 것은 JS 기반의 원활한 스크롤 아이디어와 편집자가 공유하는 코드입니다. 나는 그것이 당신을 도울 수 있기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨주세요. 편집자는 제 시간에 답장을 드릴 것입니다. Wulin Network 웹 사이트를 지원해 주셔서 대단히 감사합니다!