تصف هذه المقالة تأثير تبديل شريحة الصورة التي يمكن استدعاء JS عدة مرات على نفس الصفحة. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:
انسخ الرمز على النحو التالي: <! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<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: Function (A ، F) {
لـ (var i = 0 ، j = a.length ؛ i <j ؛ i ++) {f.call (a [i] ، i) ؛}
}
}
$ س. الشريحة = دالة (معرف ، 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 ؛ أسلوب القائمة: لا شيء ؛ عرض: block ؛ الموضع: المطلق ؛ أسفل: 10px ؛ اليمين: 10px ؛">']
الفهرس = 0 ،
$ = null ،
$ = null ؛
تغيير الوظيفة (i) {
إذا (!! $) {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) {
يعود؛
}آخر{
إذا (!! $) {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 () {
إذا (!! $) 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' ؛ 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) {
إذا (n == index) {c (1 ، هذا)}
this.onmouseover = function () {
إذا (n! = index) تغيير (n) ؛
}
}) ؛
شارع()؛
}
</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>
<script language = "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>
<script language = "javaScript">
new $ 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>
<script language = "javaScript">
new $ O.Slide ("CC" ، {color: 'green'}) ؛
</script>
</body>
</html>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.