تصف هذه المقالة طريقة تغيير اتجاه تبديل 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> JS+CSS يغير تلقائيًا اتجاه التبديل لتأثير تبديل شريحة الصورة </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 (extpable = 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 ؛
var border = true ؛
// زر التبديل
لـ (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 ++: index-- ؛
// الترتيب الأصلي
الفهرس> = AIMG.LENGTH && (index = AIMG.LENGTH - 2 ، Border = false) ؛
// ترتيب عكسي
الفهرس <= 0 && (index = 0 ، border = true) ؛
// استدعاء الوظيفة
عرض (فهرس)
} ، 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/m06.jpg"/> </li>
<li> <img src = "/images/m07.jpg"/> </li>
<li> <img src = "/images/m08.jpg"/> </li>
<li> <img src = "/images/m09.jpg"/> </li>
<li> <img src = "/images/m10.jpg"/> </li>
</ul>
<ul>
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
<li> 4 </li>
<li> 5 </li>
</ul>
</div>
</body>
</html>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.