ตัวอย่างบทความนี้แสดงให้เห็นว่า JS สามารถบรรลุเอฟเฟกต์การสลับภาพที่ดีใน Baidu Alliance ได้อย่างไร แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:
คัดลอกรหัสดังนี้: <html>
<title> JS ตระหนักถึงเอฟเฟกต์การสลับภาพที่ดีใน Baidu Alliance </title>
<body>
<script>
ลิงก์ 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] = ภาพใหม่ ();
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] = "การค้นหา baidu";
หัวนม [2] = "wulin.com";
หัวนม [3] = "โฮมเพจโซฮู";
หัวนม [4] = "บ้านวัสดุ";
var imgwidth = 550; // ความกว้างของภาพ
var imgheight = 134; // ความกว้างของรูปภาพ
var str = "<style type = 'text/css'>";
str += "#imgnv {display: none; ตำแหน่ง: สัมบูรณ์; ด้านล่าง: -1px; ขวา: 0; ความสูง: 16px;}#imgnv div {float: ซ้าย;
str += "#imgnv div.on,#imgnv div.off {margin-bottom: 1px; width: 30px; ความสูง: 15px; สายไฟ: 18px! สำคัญ; บรรทัด-สูง: 15px; font-size: 9px;
str += "#imgnv div.on {พื้นหลัง:#ce0609; color: #fff; font-weight: bold}";
str += "#imgnv div.off {พื้นหลัง:#323232; สี: #fff; การกำหนดข้อความ: ไม่มี}";
str += "#titnv {margin-top: 3px; color:#000; text-allign: center; display: none;}";
str += "</style>";
str += "<div style = 'ตำแหน่ง: ญาติ'>";
str + = "<div> <a id = 'dlink' href = '" + ลิงก์ [1] + "' target = '_ blank'> <img id = 'dimg' src = '" iMgs [1] onMouseOver = 'หยุดชั่วคราว (จริง)' onMouseOut = 'หยุดชั่วคราว (เท็จ)'> </a> </div> ";
// แก้ไขจุดที่ 1: วนเนื้อหา DIV ภายในเพื่อเพิ่มจำนวน
str += "<div id = 'imgnv'> <div id = 'it1' class = 'on' onMouseOver = 'imgswitch (1, true)' onMouseOut = 'หยุดชั่วคราว (เท็จ)'> 1 </div> <div id = 'it2' class = class = 'on' onMouseOver = 'imgswitch (3, true)' onMouseOut = 'หยุดชั่วคราว (เท็จ)'> 3 </div> <div id = 'it4' class = 'ปิด' onMouseOver = 'imgswitch (4, true)' onMouseOut = 'หยุดชั่วคราว
str + = "<div id = 'titnv'> <b>" + tits [1] + "</b> </div>";
str += "</div>";
document.write (str);
var oi = document.getElementById ("dimg");
var pause = false;
var curid = 1;
var lastid = 1;
var sw = 1;
var opacity = 100;
ความเร็ว var = 15;
var delay = (document.all)? 400: 700;
ฟังก์ชั่น setalpha () {
if (document.all) {
if (oi.filters && oi.filters.alpha) oi.filters.alpha.Opacity = ความทึบ;
}อื่น{
oi.style.mozopacity = ((ความทึบ> = 100)? 99: ความทึบ) / 100;
-
-
ฟังก์ชั่น imgswitch (id, p) {
ถ้า (p) {
หยุดชั่วคราว = จริง;
ความทึบ = 100;
setalpha ();
-
oi.src = imgs [id] .src;
document.getElementById ("dlink"). href = ลิงก์ [id];
document.getElementById ("it" + lastId) .className = "ปิด";
document.getElementById ("it" + id) .className = "on";
document.getElementById ("titnv"). innerhtml = "<b>" + tits [id] + "</b>";
curid = lastId = id;
-
ฟังก์ชั่น scrollimg () {
ถ้า (หยุดชั่วคราว && ความทึบ> = 100) กลับ;
ถ้า (sw == 0) {
ความทึบ += 2;
ถ้า (ความทึบ> ล่าช้า) {ความทึบ = 100; sw = 1; -
-
ถ้า (sw == 1) {
ความทึบ -= 3;
ถ้า (ความทึบ <10) {ความทึบ = 10; sw = 3; -
-
setalpha ();
ถ้า (sw! = 3) กลับ;
sw = 0;
Curid ++;
// แก้ไขจุดที่ 2: 4 นี่คือตัวเลข
if (Curid> 4) Curid = 1;
imgswitch (Curid, False);
-
ฟังก์ชั่นหยุดชั่วคราว {
หยุดชั่วคราว = s;
-
ฟังก์ชั่น startCroll () {
setInterval (scrollimg, ความเร็ว);
-
ฟังก์ชั่นตรวจสอบ () {
if (imgs [1] .Complete == true && imgs [2] .Complete == true) {
ClearInterval (ตรวจสอบ);
Settimeout (StartsCroll, 2000);
-
-
var checkId = setInterval (ตรวจสอบ, 10);
</script>
</body>
</html>
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน