บทความนี้อธิบายเอฟเฟกต์การสลับภาพสไลด์ที่ JS สามารถเรียกได้หลายครั้งในหน้าเดียวกัน แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:
คัดลอกรหัสดังนี้: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"
<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 = วัตถุใหม่ ();
// วิธีพื้นฐาน
$ o.base = {
E: ฟังก์ชั่น (a, f) {
สำหรับ (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; padding: 0; list-style: none; display: block; ตำแหน่ง: Absolute; Bottom: 10px; ขวา: 10px;">'],
ดัชนี = 0,
$ = null,
$ = null;
การเปลี่ยนแปลงฟังก์ชั่น (i) {
if (!! $) {cleartimeout ($);}
index =! isnan (i)? i: ดัชนี+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 == ถึง) {
กลับ;
}อื่น{
if (!! $) {ClearInterval ($);}
$ = setInterval (ฟังก์ชัน () {
var ot = a [0] .OffSettop;
v = คณิตศาสตร์ [ถึง <ot? 'ชั้น': 'เพดาน'] ((ถึง - ot)*0.2);
ถ้า (ot == ถึง) {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 () {
ถ้า (!! $) ClearTimeOut ($);
$ = settimeout (function () {change ()}, ctm);
-
ด้วย (t.style) {overflow = 'hidden'; position = 'ญาติ';}
$ o.base.e (a, function (n) {
this.style.display = "block";
ด้วย (this.firstchild.style) {borderwidth = '0'; width = w + 'px'; ความสูง = 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 == ดัชนี) {C (1, this)}
this.onMouseOver = function () {
ถ้า (n! = ดัชนี) เปลี่ยน (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">
ใหม่ $ 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">
ใหม่ $ O.Slide ("bb", {color: '#000', เวลา: 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">
ใหม่ $ O.Slide ("CC", {color: 'Green'});
</script>
</body>
</html>
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน