تصف هذه المقالة طريقة تبديل الصور ديناميكيًا بواسطة JS. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:
ملف index.css كما يلي:
انسخ الرمز كما يلي:* {
الهامش: 0px ؛ الحشو: 0px ؛
}
جسم {
العرض: 632px ؛
/*خلفية اللون: الأزرق ؛*/
الهامش: 0 Auto ؛
}
#imgscom {
لون الخلفية: أصفر.
/*تحديد المواقع النسبية ، من أجل استخدام المواقع المطلقة في الطبقة السفلية ، استخدم أصل هذا div كأصل*/
الموقف: قريب
}
#ulnav {
نوع القائمة: لا شيء ؛
الموقف: مطلق ؛
/*استخدم imgscom كأصل لتحديد موقعه تمامًا إلى الزاوية اليمنى السفلى*/
أسفل: 0px ؛
اليمين: 0px ؛
}
#ulnav li {
نوع القائمة: لا شيء ؛
تعويم: اليسار.
خلفية اللون: أسود ؛
اللون: أبيض.
الهامش اليمين: 5px ؛
العرض: 20 بكسل ؛
الارتفاع: 20 بكسل ؛
رفع الخط: 20 بكسل ؛
محاذاة النص: المركز ؛
المؤشر: مؤشر.
}
index.html كما يلي:
انسخ الرمز كما يلي: <! doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<title> JS ، CSS تبديل الصور ديناميكيًا </title>
<Link Href = "CSS /INDEX.CSS" rel = "STYLESHEET" />
<script type = "text/javaScript">
وظيفة هلام (معرف) {
return document.getElementById (id) ؛
}
وظيفة clearlibg () {
var mylis = gel ("ulnav").
لـ (var i = 0 ؛ i <mylis.length ؛ i ++) {
if (mylis [i] .nodeType == 1) {
mylis [i] .style.backgroundColor = "Black" ؛
}
}
}
window.onload = function () {
// حدد سمة لجميع LI الثلاثة
var lis = gel ("Ulnav").
لـ (var i = 0 ؛ i <lis.length ؛ i ++) {
if (lis [i] .nodeType == 1) {
lis [i] .onclick = function () {
// استبدل الصورة
هلام ("myimg"). setAttribute ("src" ، "الصور/" + this.innerhtml + ".png") ؛
// جميع ألوان LI استعادة
clearlibg () ؛
// استبدل لون ملصق خلفية LI
this.style.backgroundColor = "Silver" ؛
} ؛
}
}
} ؛
</script>
</head>
<body>
<div id = "imgscom">
<img src = "Images /1.png" id = "myimg" />
<ul id = "ulnav">
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
</ul>
</div>
</body>
</html>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.