تصف هذه المقالة طريقة JS لتحقيق تأثير التبديل لصورة شريحة الفلاش. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:
انسخ الرمز على النحو التالي: <! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3
<html xmlns = "http://www.w3.org/1999/xhtml" lang = "zh-cn">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = gb2312" />
<meta http-equiv = "content-language" content = "gb2312" />
<meta name = "المؤلف" content = "Rainoxu" />
<title> يحاكي JS تأثير تبديل صورة شريحة الفلاش </title>
</head>
<body>
<type type = "text/css">
/ * <! [CDATA [ */
ul ، li {
الحشو: 0 ؛
الهامش: 0 ؛
على غرار القائمة: لا شيء ؛
}
#flashbox {
العرض: 326px ؛
الارتفاع: 246 بكسل ؛
الحدود: 1 بكسل Solid #EEE ؛
الموقف: قريب
}
#flashbox img {
/*لا تظهر في البداية*/
العرض: لا شيء ؛
/* استخدم الحدود لتحقيق مساحات فارغة ، لأن الهامش والزواج قد يتسبب أحيانًا في بعض المتاعب*/
الحدود: 3px الصلبة #FFF ؛
}
#flashbox ul {
الموقف: مطلق ؛
اليمين: 7px ؛
أسفل: 9px ؛
الخط: 9px tahoma ؛
}
#flashbox ul li {
العرض: كتلة ؛
تعويم: اليسار.
العرض: 12 بكسل ؛
الارتفاع: 12 بكسل ؛
Line-Leight: 12px ؛
الهامش اليمين: 3px ؛
الحدود: 1 بكسل Solid #999 ؛
الخلفية:#f0f0f0 ؛
محاذاة النص: المركز ؛
المؤشر: مؤشر.
}
#flashbox ul li.hover {
لون الحدود: أحمر.
الخلفية:#ffe1e1 ؛
اللون: أحمر.
}
/ *]]> */
</style>
<script type = "text/javaScript">
وظيفة flashboxctrl (o) {
this.obj = document.getElementById (o) ؛
// على الرغم من أن هذه الطريقة الخاصة قد كتبت ، إلا أنها ليست مفيدة بعد
وظيفة AddListener (ele ، eventName ، functionBody) {
if (ele.attachevent) {
ele.attachevent ("on"+eventName ، functionBody) ؛
} آخر إذا (ele.addeventListener) {
ele.AdDeventListener ("on"+eventName ، functionBody ، false) ؛
}آخر{
العودة كاذبة
}
}
// التهيئة
this.init = function () {
var objimg = this.obj.getElementsByTagName ("img") ؛
var taglength = objimg.length ؛
if (tagLength> 0) {
var oul = document.createElement ("ul") ؛
oul.setattribute ("id" ، o+"numtag") ؛
لـ (var i = 0 ؛ i <tagLength ؛ i ++) {
var oli = oul.appendChild (document.createElement ("li")) ؛
إذا (i == 0) {
oli.setattribute ("class" ، "hover") ؛ // قم بتعيين أول واحد يبرز أثناء التهيئة
oli.setattribute ("className" ، "hover") ؛
}
// قم بتعيين عدد العلامات
oli.appendchild (document.createTextNode ((i+1))) ؛
}
this.obj.appendchild (oul) ؛
objimg [0] .style.display = "block" ؛
// تعيين أحداث العلامات
var otag = this.obj.getElementSbyTagName ("li") ؛
لـ (var i = 0 ؛ i <otag.length ؛ i ++) {
otag [i] .onmouseover = function () {
لـ (j = 0 ؛ j <otag.length ؛ j ++) {
Otag [j] .className = "" ؛
objimg [j] .style.display = "none" ؛
}
this.className = "Hover" ؛
objimg [this.innerhtml-1] .style.display = "block" ؛
}
}
}
} ؛
// لم تتم كتابة طريقة التمرير التلقائي بعد
this.imgroll = function () {} ؛
// يتم تحميل طريقة init () تلقائيًا عند إنشاء كائن لتهيئة الكائن
this.init () ؛
}
</script>
<div id = "flashbox">
<img src = "/images/m02.jpg"/>
<img src = "/images/m03.jpg"/>
<img src = "/images/m04.jpg"/>
<img src = "/images/m09.jpg"/>
</div>
<script type = "text/javaScript">
// إنشاء كائن
new FlashboxCtrl ("Flashbox") ؛
</script>
</body>
</html>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.