이 기사에서는 JS가 같은 페이지에서 여러 번 호출 할 수있는 이미지 슬라이드 스위칭 효과에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
코드를 다음과 같이 복사하십시오.
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<title> JS 이미지 슬라이드 스위칭 효과 같은 페이지에서 여러 번 호출 할 수 있습니다 </title>
<meta http-equiv = "content-type"content = "text/html; charset = gb2312">
<!-<head>와 </head>-> 사이에 다음 코드를 추가하십시오
<script language = "javaScript">
// 네임 스페이스를 선언합니다
var $ o = new Object ();
// 기본 방법
$ O.Base = {
E : 함수 (a, f) {
for (var i = 0, j = a.length; i <j; i ++) {f.call (a [i], i);}
}
}
$ o. 슬라이드 = 함수 (id, arg) {
var arg = arg || {},
t = document.getElementById (id),
a = t.getElementsByTagName ( "a"),
lis = [],
cl = arg.color || '#f30',
CTM = Arg.Time*1000 || 2000,
w = t.clientWidth,
H = T.ClientHeight,
b = [ '<ul style = "마진 : 0; 패딩 : 0; 목록 스타일 : 없음; 디스플레이 : 블록; 위치 : 절대; 하단 : 10px; 오른쪽 : 10px;">'],
색인 = 0,
$ = null,
$ = null;
기능 변경 (i) {
if (!! $) {cleartimeout ($);}
index =! isnan (i)? i : index+1;
if (index> = a.length) {index = 0;}
$ O.Base.e (LIS, function (k) {if (k == index) {c (1, this);} else {c (0, this)});
var to = - 인덱스*h;
if (a [0] .OffSetTop == to) {
반품;
}또 다른{
if (!! $) {clearinterval ($);}
$ = setInterVal (function () {
var ot = a [0] .OffSetTop;
v = math [to <ot? 'floor': 'ceil'] ((to -ot)*0.2);
if (ot == to) {clearInterval ($); $ = null; st ();}
OT += V;
a [0] .style.margintop = ot + "px";
}, 30)
};
}
함수 C (B, O) {
o.style.backgroundcolor = !! b? cl : "#fff";
o.style.color = !! b? "#fff": cl;
}
함수 st () {
if (!! $) cleartimeout ($);
$ = settimeout (function () {change ()}, ctm);
}
with (t.style) {오버 플로 = '숨겨진'; 위치 = '상대';}
$ O.Base.e (a, 함수 (n) {
this.style.display = "block";
with (this.firstchild.style) {borderwidth = '0'; width = w + 'px'; height = h + 'px';}
b.push ( '<li>' + (n + 1) + '</li>');
});
b.push ( '</ul>');
t.innerhtml += b.join ( "");
lis = t.getElementsByTagName ( "li");
$ O.Base.e (lis, function (n) {
if (n == index) {c (1, this)}
this.onmouseOver = function () {
if (n! = index) 변경 (n);
}
});
성();
}
</스크립트>
</head>
<body>
<!-<body>와 </body>-> 사이에 다음 코드를 추가하십시오
<div id = "aa">
<a href = "javaScript : alert ( '1')"> <img src = "/images/1.jpg"> </a>
<a href = "javaScript : alert ( '2')"> <img src = "/images/2.jpg"> </a>
<a href = "javaScript : alert ( '3')"> <img src = "/images/3.jpg"> </a>
<a href = "javaScript : alert ( '4')"> <img src = "/images/4.jpg"> </a>
<a href = "javaScript : alert ( '5')"> <img src = "/images/5.jpg"> </a>
<a href = "javaScript : alert ( '6')"> <img src = "/images/6.jpg"> </a>
<a href = "javaScript : alert ( '7')"> <img src = "/images/7.jpg"> </a>
<a href = "javaScript : alert ( '8')"> <img src = "/images/8.jpg"> </a>
<a href = "javaScript : alert ( '9')"> <img src = "/images/9.jpg"> </a>
</div>
<script language = "javaScript">
New $ O.Slide ( "AA");
</스크립트>
<br>
<div id = "bb">
<a href = "###"> <img src = "/images/1.jpg"> </a>
<a href = "###"> <img src = "/images/2.jpg"> </a>
<a href = "###"> <img src = "/images/3.jpg"> </a>
<a href = "###"> <img src = "/images/4.jpg"> </a>
<a href = "###"> <img src = "/images/5.jpg"> </a>
</div>
<script language = "javaScript">
New $ O.Slide ( "BB", {색상 : '#000', 시간 : 0.2});
</스크립트>
<br>
<div id = "CC">
<a href = "###"> <img src = "/images/1.jpg"> </a>
<a href = "###"> <img src = "/images/2.jpg"> </a>
<a href = "###"> <img src = "/images/3.jpg"> </a>
<a href = "###"> <img src = "/images/4.jpg"> </a>
<a href = "###"> <img src = "/images/5.jpg"> </a>
</div>
<script language = "javaScript">
New $ O.Slide ( "CC", {Color : 'Green'});
</스크립트>
</body>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.