تصف هذه المقالة طريقة JS+CSS لتحقيق تأثير تبديل شريحة التركيز الباهتة. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:
انسخ الرمز على النحو التالي: <! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<title> A JS+CSS Fade-in Focus Picture Slide Effect </title>
<style>
الجسم ، div ، ul ، li {margin: 0 ؛ padding: 0 ؛}
ul {style-style-type: none ؛}
body {background:#000 ؛ text-align: center ؛ font: 12px/20px arial ؛}
#box {الموضع: النسبية ؛ العرض: 322px ؛ الارتفاع: 172px ؛ الخلفية: #ffff ؛ الحدود radius: 5px ؛ الحدود: 8px solid #ffff ؛ الهامش: 10px auto ؛}
#box .list {الموضع: النسبية ؛ العرض: 320px ؛ الارتفاع: 240px ؛ فائض: مخفي ؛ الحدود: 1px solid #ccc ؛}
#box .list li {position: absolute ؛ top: 0 ؛ left: 0 ؛ width: 320px ؛ الارتفاع: 240px ؛ عتامة: 0 ؛ مرشح: alpha (التعتيم = 0) ؛}
#box .list li.current {opatity: 1 ؛ filter: alpha (extpated = 100) ؛}
#box .count {الموضع: Absolute ؛ اليمين: 0 ؛ القاع: 5px ؛}
#box .count li {color: #ffff ؛ float: left ؛ width: 20px ؛ الارتفاع: 20px ؛ المؤشر: مؤشر ؛ الهامش اليمين: 5px ؛ overflow: hidden ؛ الخلفية:#f90 ؛ التعتيم: 0.7 ؛ مرشح: ألفا (عتامة = 70)
#box .count li.current {color: #fff ؛ opacity: 1 ؛ filter: alpha (expative = 100) ؛ font-weight: 700 ؛ background:#f60 ؛}
#tmp {width: 100px ؛ الارتفاع: 100px ؛ الخلفية: أحمر ؛ الموضع: مطلق ؛}
</style>
<script type = "text/javaScript">
window.onload = function ()
{
var obox = document.getElementById ("box") ؛
var aul = document.getElementSbyTagName ("ul") ؛
var aimg = aul [0] .getElementsByTagName ("li") ؛
var anum = aul [1] .getElementsByTagName ("li") ؛
var timer = play = null ؛
var i = index = 0 ؛
// زر التبديل
لـ (i = 0 ؛ i <anum.length ؛ i ++)
{
anum [i] .index = i ؛
anum [i] .onmouseover = function ()
{
عرض (this.index)
}
}
// يمرد الماوس ويغلق المؤقت
obox.onmouseover = function ()
{
Clearinterval (play)
} ؛
// يترك الماوس ويبدأ التشغيل التلقائي
obox.onmouseout = function ()
{
autoplay ()
} ؛
// وظيفة التشغيل التلقائي
وظيفة Autoplay ()
{
play = setInterval (function () {
فهرس ++ ؛
index> = AIMG.Length && (index = 0) ؛
عرض (فهرس) ؛
} ، 2000) ؛
}
autoplay () ؛ // تطبيق تبديل صورة التبديل
عرض الوظيفة (أ)
{
الفهرس = أ ؛
var alpha = 0 ؛
لـ (i = 0 ؛ i <anum.length ؛ i ++) anum [i] .className = "" ؛
anum [index] .className = "current" ؛
ClearInterval (مؤقت) ؛
لـ (i = 0 ؛ i <aimg.length ؛ i ++)
{
AIMG [i] .style.Opacity = 0 ؛
AIMG [i] .style.filter = "alpha (عتامة = 0)" ؛
}
Timer = setInterval (function () {
ألفا += 2 ؛
ألفا> 100 && (ألفا = 100) ؛
AIMG [index] .style.Opacity = alpha / 100 ؛
AIMG [index] .style.filter = "alpha (opatity =" + alpha + ")" ؛
ألفا == 100 && clearinterval (مؤقت)
} ، 20) ؛
}
} ؛
</script>
</head>
<body>
<div id = "box">
<ul>
<li> <img src = "/images/m01.jpg"/> </li>
<li> <img src = "/images/m02.jpg"/> </li>
<li> <img src = "/images/m03.jpg"/> </li>
<li> <img src = "/images/m04.jpg"/> </li>
<li> <img src = "/images/m05.jpg"/> </li>
</ul>
<ul>
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
<li> 4 </li>
<li> 5 </li>
</ul>
</div>
</body>
</html>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.