تصف هذه المقالة طريقة JavaScript لتحقيق العرض التدريجي لتشغيل الصور. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:
انسخ الرمز كما يلي: <html>
<title> تعرض حلقة الصورة تدريجياً رمز تأثير التشغيل </title>
<head>
<!-1. أدخل الكود التالي بين <head> </head> من HEML: ->
<لغة البرنامج النصي = javaScript>
<!-//
Sandra0 = new Image () ؛
Sandra0.Src = "/Images/M01.JPG" ؛
Sandra1 = صورة جديدة () ؛
sandra1.src = "/emages/m02.jpg" ؛
Sandra2 = صورة جديدة () ؛
Sandra2.Src = "/Images/M03.JPG" ؛
var i_strngth = 1
var i_image = 0
var imageurl = new array ()
ImageUrl [0] = "/Images/M01.jpg"
ImageUrl [1] = "/Images/M02.JPG"
ImageUrl [2] = "/Images/M03.JPG"
وظيفة showimage () {
if (document.all) {
if (i_strngth <= 110) {
TESTIMAGE.INNERHTML = "<img style = 'filter: alpha (opacity ="+i_strngth+")' src ="+imageurl [i_image]+"border = 0>" ؛
i_strngth = i_strngth+10
var timer = setTimeout ("showimage ()" ، 100)
}
آخر {
ClearTimeout (مؤقت)
var timer = setTimeout ("HideImage ()" ، 1000)
}
}
if (document.layers) {
ClearTimeout (مؤقت)
document.testimage.document.write ("<img src ="+imageurl [i_image]+"border = 0>")
document.close ()
i_image ++
if (i_image> = imageurl.length) {i_image = 0}
var timer = setTimeout ("showimage ()" ، 2000)
}
}
وظيفة HideImage () {
if (i_strngth> =-10) {
TESTIMAGE.INNERHTML = "<img style = 'filter: alpha (opacity ="+i_strngth+")' src ="+imageurl [i_image]+"border = 0>" ؛
i_strngth = i_strngth-10
var timer = setTimeout ("HideImage ()" ، 100)
}
آخر {
ClearTimeout (مؤقت)
i_image ++
if (i_image> = imageurl.length) {i_image = 0}
i_strngth = 1
var timer = setTimeout ("showimage ()" ، 500)
}
}
//->
</script>
</head>
<body>
<!-2. تعديل بيان <Body> إلى:->
<body onload = "showimage ()">
<!-3. أضف الكود التالي إلى <Body> </body> من HEML: TOP: 120px ؛ اليسار: 240 بكسل يمكن تعيين موضع العرض->
<div id = "testimage" style = "الموضع: المطلق ؛ الرؤية: مرئية ؛ الأعلى: 120 بكسل ؛ اليسار: 240px"> </div>
</body>
</html>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.