1. 개요
루프에서 이미지를 스크롤하면 웹 페이지에 동적 효과를 추가 할뿐만 아니라 페이지 공간을 저장하고 제한된 페이지에 더 많은 사진이 표시되도록 효과적으로 보장합니다.
2. 기술 포인트
주요 방법은 그림의 루프 스크롤 효과를 달성하는 데 사용됩니다. settimeout () 메소드의 구문 형식은 다음과 같습니다.
settimeout (함수, 밀리 초, [인수])
매개 변수 설명 :
에이. 기능 : 호출 할 JavaScript 사용자 정의 기능의 이름.
비. 밀리 초 : 시간 초과 시간을 밀리 초로 설정하십시오.
기능 : 시간 초과 시간이 끝나면 기능이 호출됩니다. 이 값은 CLEARTIMEOUT () 함수로 지울 수 있습니다.
3. 특정 구현
(1) 페이지의 적절한 위치에 ID 속성 데모가있는 <div> 태그를 추가하고 태그에 표시 할 테이블과 그림을 추가하십시오. 키 코드는 다음과 같습니다.
<div id = "demo"style = "오버 플로우 : hidden; 너비 : 455px; 높이 : 166px;"> <테이블 셀 패싱 = "0"CellPadding = "0"> <tr> <td valign = "top"id = "marquepic1"> <!-스크롤 to scroll-> <셀렉션 = "셀렉션"0 CellPacing. align = "center"> <%for (int i = 1; i <8; i ++) {%> <td> <img src = "images/<%= i%>(2) 중단되지 않은 이미지 루프 스크롤 효과를 달성하려면 사용자 정의 JavaScript 함수 move ()를 작성하십시오. 속도 값이 클수록 그림 스크롤이 더 빨라집니다. 특정 코드는 다음과 같습니다.
<script language = "javaScript"> var speed = 30; // 간격 시간 marquepic2.innerhtml = marquepic1.innerhtml; var demo = document.getElementById ( "demo"); // 데모 객체 함수 marquee (n) {// 이미지 루프 스크롤 실현을위한 방법 if (marquepic1.offsetWidth-Demo.Scrollleft <= 0) {demo.scrollleft = 0; } else {demo.scrollleft = demo.scrollleft+n;}} var mymar = setInterval ( "marquee (5)", speed); demo.onmouseover = function () {// Scrolling ClearinterVal (MyMar); mymar = setInterval ( "marquee (5)", 속도);} </script>위의 내용은 편집기가 이미지 루프 스크롤 효과를 실현하기 위해 귀하에게 소개 한 JavaScript 코드에 대한 관련 지식입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!