บทความนี้อธิบายวิธีการของ JS เพื่อให้ตระหนักถึงผลการสลับของภาพสไลด์แฟลช แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:
คัดลอกรหัสดังนี้: <! 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" lang = "zh-cn">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = gb2312" />
<meta http-equiv = "content-language" content = "GB2312" />
<meta name = "ผู้เขียน" content = "rainoxu" />
<title> js จำลองเอฟเฟกต์การสลับภาพสไลด์แฟลช </title>
</head>
<body>
<style type = "text/css">
/ * <! [cdata [ */
ul, li {
Padding: 0;
มาร์จิ้น: 0;
รายการสไตล์: ไม่มี;
-
#flashbox {
ความกว้าง: 326px;
ความสูง: 246px;
ชายแดน: 1px Solid #EEE;
ตำแหน่ง: ญาติ;
-
#flashbox img {
/*อย่าแสดงตอนแรก*/
แสดง: ไม่มี;
/* ใช้พรม
ชายแดน: 3px Solid #FFF;
-
#flashbox ul {
ตำแหน่ง: สัมบูรณ์;
ขวา: 7px;
ด้านล่าง: 9px;
แบบอักษร: 9px Tahoma;
-
#flashbox ul li {
แสดง: บล็อก;
ลอย: ซ้าย;
ความกว้าง: 12px;
ความสูง: 12px;
ความสูงของสาย: 12px;
มาร์จิ้น-ขวา: 3px;
ชายแดน: 1px Solid #999;
ความเป็นมา:#F0F0F0;
TEXT-ALIGN: CENTER;
เคอร์เซอร์: ตัวชี้;
-
#flashbox ul li.hover {
สีชายแดน: สีแดง;
ความเป็นมา:#ffe1e1;
สี: สีแดง;
-
-
</style>
<script type = "text/javascript">
ฟังก์ชั่น flashboxctrl (o) {
this.obj = document.getElementById (o);
// แม้ว่าวิธีการส่วนตัวนี้จะถูกเขียน แต่ก็ไม่มีประโยชน์ในขณะนี้
ฟังก์ชั่น addListener (ele, eventname, functionbody) {
ถ้า (ele.attachevent) {
ele.attachevent ("on"+eventname, functionbody);
} อื่นถ้า (ele.addeventListener) {
ele.addeventListener ("on"+eventname, functionbody, false);
}อื่น{
กลับเท็จ;
-
-
// การเริ่มต้น
this.init = function () {
var objimg = this.obj.getElementsByTagname ("IMG");
var taglength = objimg.length;
if (taglength> 0) {
var oul = document.createElement ("ul");
OUL.SetAttribute ("ID", O+"NUMTAG");
สำหรับ (var i = 0; i <taglength; i ++) {
var oli = oul.appendchild (document.createelement ("li"));
ถ้า (i == 0) {
oli.setAttribute ("คลาส", "โฮเวอร์"); // ตั้งค่าแรกให้เน้นในระหว่างการเริ่มต้น
oli.setAttribute ("classname", "hover");
-
// ตั้งค่าจำนวนฉลาก
Oli.AppendChild (document.createtextNode ((i+1)));
-
this.obj.appendchild (OUL);
objimg [0] .style.display = "block";
// ตั้งค่า TAG Events
var otag = this.obj.getElementsByTagname ("li");
สำหรับ (var i = 0; i <otag.length; i ++) {
otag [i] .onmouseover = function () {
สำหรับ (j = 0; j <otag.length; j ++) {
otag [j] .className = "";
objimg [j] .style.display = "ไม่มี";
-
this.className = "Hover";
objimg [this.innerhtml-1] .style.display = "block";
-
-
-
-
// วิธีการเลื่อนอัตโนมัติยังไม่ได้เขียน
this.imgroll = function () {};
// เมธอด init () จะถูกโหลดโดยอัตโนมัติเมื่อสร้างวัตถุเพื่อเริ่มต้นวัตถุ
this.init ();
-
</script>
<div id = "flashbox">
<img src = "/images/m02.jpg"/>>
<img src = "/images/m03.jpg"/>
<img src = "/images/m04.jpg"/>>
<img src = "/images/m09.jpg"/>
</div>
<script type = "text/javascript">
// สร้างวัตถุ
FlashboxCtrl ใหม่ ("Flashbox");
</script>
</body>
</html>
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน