توضح أمثلة هذه المقالة كيف يمكن لـ JS تحقيق تأثير جيد لتبديل الصور في تحالف Baidu. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:
انسخ الرمز كما يلي: <html>
<title> يدرك JS تأثير تبديل الصور الجيد في Baidu Alliance </title>
<body>
<script>
Links var = new array () ؛
الروابط [1] = "http://www.baidu.com/" ؛
الروابط [2] = "//www.vevb.com/" ؛
الروابط [3] = "http://www.sohu.com/" ؛
الروابط [4] = "http://sc.vevb.com/" ؛
var imgs = new array () ؛
لـ (var n = 1 ؛ n <= 5 ؛ n ++) imgs [n] = new image () ؛
IMGS [1] .SRC = "Images/M01.jpg" ؛
IMGS [2] .SRC = "Images/M02.JPG" ؛
IMGS [3] .SRC = "Images/M03.jpg" ؛
IMGS [4] .SRC = "Images/M04.JPG" ؛
var tits = new array () ؛
الثدي [1] = "بحث بايدو" ؛
الثدي [2] = "wulin.com" ؛
الثدي [3] = "صفحة Sohu الرئيسية" ؛
الثدي [4] = "Material Home" ؛
var imgwidth = 550 ؛ // عرض الصورة
var imgheight = 134 ؛ // عرض الصورة
var str = "<style type = 'text/css'>" ؛
str += "#imgnv {display: none ؛ الموضع: absolute ؛ القاع: -1px ؛ اليمين: 0 ؛ الارتفاع: 16px ؛}#imgnv div {float: left ؛ margin-right: 1px ؛}" ؛
str += "#imgnv div.on ،#imgnv div.off {margin-bottom: 1px ؛ width: 30px ؛ height: 15px ؛ line-height: 18px! harm ؛ line-height: 15px ؛ font-size: 9px ؛ text-align: center ؛ consor: pointer ؛
str += "#imgnv div.on {background:#ce0609 ؛ color: #fff ؛ font-weight: bold}" ؛
str += "#imgnv div.off {background:#323232 ؛ color: #fff ؛ text-decoration: none}" ؛
str += "#titnv {margin-top: 3px ؛ color:#000 ؛ text-align: center ؛ display: none ؛}" ؛
str += "</style>" ؛
str += "<div style = 'الموضع: النسبي'>" ؛
str + = "<viv> <a id = 'dlink' href = '" + links [1] + "' target = '_ blank'> <img id = 'dimg' src = '" + imgs [1] onMouseover = 'Pause (true)' onMouseout = 'Pause (false)'> </a> </viv> "؛
// تعديل النقطة 1: حلقة محتوى DIV الداخلي لزيادة عدد
str += "<div id = 'imgnv'> <div id = 'it1' class = 'on' onMouseover = 'imgswitch (1 ، true)' onMouseout = 'pause (false)'> 1 </viv> <div id = 'it2' class = 'Off' onMouseover = imgswitch (2 ، true) ' class = 'on' onMouseover = 'imgswitch (3 ، true)' onMouseout = 'Pause (false)'> 3 </viv> <div id = 'it4' class = 'Off' onMouseover = 'imgswitch (4 ، true)' onMouseout = 'appe (false)'> 4 </div> </div> ؛
str + = "<div id = 'titnv'> <b>" + tits [1] + "</b> </viv>" ؛
str += "</div>" ؛
document.write (str) ؛
var oi = document.getElementById ("dimg") ؛
var pause = false ؛
var curid = 1 ؛
var lastid = 1 ؛
var sw = 1 ؛
var opitate = 100 ؛
var speed = 15 ؛
var delay = (document.all)؟ 400: 700 ؛
وظيفة setalpha () {
if (document.all) {
if (oi.filters && oi.filters.alpha) oi.filters.alpha.Opacity = opitated ؛
}آخر{
oi.style.mozopacity = ((التعتيم> = 100)؟ 99: عتامة) / 100 ؛
}
}
وظيفة imgswitch (id ، p) {
if (p) {
وقفة = صواب ؛
العتامة = 100 ؛
setalpha () ؛
}
oi.src = imgs [id] .src ؛
document.getElementById ("dLink"). href = links [id] ؛
document.getElementById ("it" + lastId) .ClassName = "Off" ؛
document.getElementById ("it" + id) .className = "on" ؛
document.getElementById ("titnv"). innerhtml = "<b>" + tits [id] + "</b>" ؛
curid = lastId = id ؛
}
وظيفة scrollimg () {
if (lepause && opitated> = 100) return ؛
إذا (SW == 0) {
التعتيم += 2 ؛
if (عتامة> تأخير) {opacity = 100 ؛ SW = 1 ؛ }
}
إذا (SW == 1) {
العتامة -= 3 ؛
if (عتامة <10) {عتامة = 10 ؛ SW = 3 ؛ }
}
setalpha () ؛
إذا (SW! = 3) العودة ؛
SW = 0 ؛
Curid ++ ؛
// تعديل النقطة 2: 4 هنا أيضًا رقم
إذا (curid> 4) curid = 1 ؛
imgswitch (curid ، false) ؛
}
وقفة الوظيفة (s) {
وقفة = s ؛
}
وظيفة تبدأ croll () {
setInterval (scrollimg ، السرعة) ؛
}
دالة codilload () {
if (imgs [1] .complete == true && imgs [2] .complete == true) {
ClearInterval (checkid) ؛
setTimeout (startCroll ، 2000) ؛
}
}
var checkId = setInterval (condload ، 10) ؛
</script>
</body>
</html>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.