บทความนี้อธิบายวิธีการของ JS+CSS เพื่อให้ได้เอฟเฟกต์การสลับสไลด์โฟกัสของภาพจางหายไป แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:
คัดลอกรหัสดังนี้: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"
<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 Switching Effect </title>
<style>
ร่างกาย, div, ul, li {margin: 0; padding: 0;}
ul {ประเภทรายการประเภท: ไม่มี;}
Body {background:#000; Text-ALign: Center; Font: 12px/20px Arial;}
#box {ตำแหน่ง: สัมพัทธ์; ความกว้าง: 322px; ความสูง: 172px; พื้นหลัง: #FFFF; Border-Radius: 5px; Border: 8px Solid #FFFF; มาร์จิ้น: 10px auto;}
#Box .List {ตำแหน่ง: สัมพัทธ์; ความกว้าง: 320px; ความสูง: 240px; ล้น: ซ่อนเร้น; ชายแดน: 1px ของแข็ง #ccc;}
#Box .List li {ตำแหน่ง: สัมบูรณ์; ด้านบน: 0; ซ้าย: 0; ความกว้าง: 320px; ความสูง: 240px; ความทึบ: 0; ตัวกรอง: อัลฟ่า (ความทึบ = 0);};
#Box .List li.current {ความทึบ: 1; ตัวกรอง: อัลฟ่า (ความทึบ = 100);}
#Box .Count {ตำแหน่ง: สัมบูรณ์; ขวา: 0; ด้านล่าง: 5PX;}
#box .count li {color: #ffff; float: left; width: 20px; ความสูง: 20px; เคอร์เซอร์: ตัวชี้; มาร์จิ้น-ขวา: 5px; ล้น: ซ่อนเร้น;
#box .count li.current {color: #fff; Opacity: 1; ตัวกรอง: alpha (opacity = 100); Font-Weight: 700; พื้นหลัง:#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 = 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 (เล่น)
-
// เมาส์ออกและเริ่มเล่นอัตโนมัติ
obox.onmouseout = function ()
-
เล่นอัตโนมัติ ()
-
// ฟังก์ชั่นการเล่นอัตโนมัติ
ฟังก์ชั่น Autoplay ()
-
play = setInterval (function () {
ดัชนี ++;
index> = aimg.length && (index = 0);
แสดง (ดัชนี);
}, 2000);
-
Autoplay (); // แอปพลิเคชันภาพสลับจางหายไป
ฟังก์ชั่นแสดง (a)
-
index = a;
var alpha = 0;
สำหรับ (i = 0; i <anum.length; i ++) anum [i] .className = "";
anum [index] .className = "ปัจจุบัน";
ClearInterval (ตัวจับเวลา);
สำหรับ (i = 0; i <aimg.length; i ++)
-
AIMG [i] .style.Opacity = 0;
AIMG [i] .style.filter = "alpha (opacity = 0)";
-
timer = setInterval (ฟังก์ชัน () {
อัลฟ่า += 2;
อัลฟ่า> 100 && (alpha = 100);
AIMG [ดัชนี] .Style.Opacity = Alpha / 100;
AIMG [ดัชนี] .style.filter = "alpha (opacity =" + alpha + ")";
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 ของทุกคน