この記事では、JSが同じページで複数回呼び出すことができる画像スライドスイッチング効果について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
次のようにコードをコピーします。<
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Title> JS画像スライドスイッチング効果は、同じページで複数回呼び出すことができます</title>
<meta http-equiv = "content-type" content = "text/html; charset = gb2312">
<！ - <head>と</head> - >の間に次のコードを追加します
<スクリプト言語= "javascript">
//名前空間を宣言します
var $ o = new object（）;
//基本方法
$ o.base = {
E：function（a、f）{
for（var i = 0、j = a.length; i <j; i ++）{f.call（a [i]、i）;}
}
}
$ o。 slide = function（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; list-style：none; display：block; position：absolute; bottom：10px; right：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 = - index*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（$）;
$ = setimeout（function（）{change（）}、ctm）;
}
with（t.style）{overflow = 'hidden'; position = 'relative';}
$ o.base.e（a、function（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）change（n）;
}
}）;
st（）;
}
</script>
</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>
<スクリプト言語= "javascript">
new $ o.slide（ "aa"）;
</script>
<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>
<スクリプト言語= "javascript">
new $ o.slide（ "bb"、{color： '＃000'、time：0.2}）;
</script>
<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>
<スクリプト言語= "javascript">
new $ o.slide（ "cc"、{color： 'green'}）;
</script>
</body>
</html>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。