ตัวอย่างนี้เขียนโดยฉันในขณะที่ศึกษามันอีกครั้ง ฉันหวังว่ามันจะช่วยให้ทุกคนเรียนรู้ร่วมกัน เอฟเฟกต์แสดงในรูป:
รหัส HTML มีลักษณะเช่นนี้:
การคัดลอกรหัสมีดังนี้:
<html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "en" lang = "en">
<head>
<title> การสร้างเครื่องมือการเรียกดูรูปภาพ </title>
<script type = "text/javascript" src = "js/main.js"> </script>
<link rel = "stylesheet" type = "text/css" href = "style/css.css">
</head>
<body>
<div id = "pic_browser">
<img src = "images/prev.png" onclick = "javascript: jzk.ui.moveimg (-1);"/>
<img id = "img1" onclick = ""/>
<div onclick = "javascript: jzk.ui.moveimg (3);"> </div> <!-เพิ่มหน้ากากสามระดับ->
<img id = "img2" onclick = ""/>
<div onclick = "javascript: jzk.ui.moveimg (2);"> </div> <!-เพิ่มหน้ากากรอง->
<img id = "img3" onclick = ""/>
<div onclick = "javascript: jzk.ui.moveimg (1);"> </div> <!-เพิ่มระดับของหน้ากาก->
<img id = "img4" onclick = ""/>
<img id = "img5" onclick = ""/>
<div onclick = "javascript: jzk.ui.moveimg (-1);"> </div> <!-เอฟเฟกต์เดียวกับ Mask1->
<img id = "img6" onclick = ""/>
<div onclick = "javascript: jzk.ui.moveimg (-2);"> </div> <!-เอฟเฟกต์เดียวกับ Mask2->
<img id = "img7" onclick = ""/>
<div onclick = "javascript: jzk.ui.moveimg (-3);"> </div> <!-เอฟเฟกต์เดียวกับ Mask3->
<img src = "images/next.png" onclick = "javascript: jzk.ui.moveimg (1);"/>
</div>
</body>
</html>
รหัส CSS มีดังนี้:
The Mask1, 2, 3 ... นี่คือ div ที่ครอบคลุมภาพถ่ายหลายรูป แอตทริบิวต์ความทึบถูกใช้เพื่อกำหนดความโปร่งใสซึ่งสามารถบรรลุความรู้สึกของความคลุมเครือและทำให้รูปลักษณ์สวยงามยิ่งขึ้น
การคัดลอกรหัสมีดังนี้:
Body {Width: 1340px; ความสูง: 500px; พื้นหลัง: url (../ images/body_bg.gif) ไม่ต้องทำซ้ำ;}
#PIC_BROWSER {width: 860px; ความสูง: 192px; ตำแหน่ง: สัมพัทธ์; มาร์จิ้น: 130px 106px;}
#PIC_BROWSER IMG {ตำแหน่ง: Absolute; Border: None;}
.prev {top: 76px; ซ้าย: 0px; -
#img1, .mask3 {width: 106px; ความสูง: 70px; ซ้าย: 45px; top: 61px; z-index: 4;}
#img2, .mask2 {width: 166px; ความสูง: 110px; ซ้าย: 95px; top: 41px; z-index: 5;}
#img3, .mask1 {width: 226px; ความสูง: 150px; ซ้าย: 175px; top: 21px; z-index: 6;}
#img4 {width: 290px; ความสูง: 192px; ซ้าย: 285px; top: 0px; z-index: 7;}
#img5, .mask5 {width: 226px; ความสูง: 150px; ขวา: 175px; top: 21px; z-index: 6;}
#img6, .mask6 {width: 166px; ความสูง: 110px; ขวา: 95px; top: 41px; z-index: 5;}
#img7, .mask7 {width: 106px; ความสูง: 70px; ขวา: 45px; top: 61px; z-index: 4;}
.NEXT {TOP: 76PX; ขวา: 0PX;}
.mask1, .mask2, .mask3, .mask5, .mask6, .mask7 {พื้นหลัง: #fff; ตำแหน่ง: สัมบูรณ์;}
.mask1, .mask5 {ความทึบ: 0.3;}
.mask2, .mask6 {ความทึบ: 0.5;}
.mask3, .mask7 {ความทึบ: 0.7;}
รหัส JS มีดังนี้:
การคัดลอกรหัสมีดังนี้:
window.onload = function ()
-
jzk.app.initimg ();
-
var imgarray = new Array ();
imgarray [0] = 'ภาพ/1.jpg';
imgarray [1] = 'รูปภาพ/2.jpg';
imgarray [2] = 'ภาพ/3.jpg';
imgarray [3] = 'ภาพ/4.jpg';
imgarray [4] = 'ภาพ/5.jpg';
imgarray [5] = 'รูปภาพ/6.jpg';
imgarray [6] = 'ภาพ/7.jpg';
var base = 0;
var jzk = {}; /*กำหนดเนมสเปซ*/
jzk.tools = {};/*เลเยอร์ชั้นแรกเลเยอร์*/
jzk.ui = {};/*เลเยอร์ที่สองเลเยอร์*//
jzk.ui.moveimg = ฟังก์ชั่น (ออฟเซ็ต)
-
base = (base-offset);
สำหรับ (var i = base; i <base +7; i ++)/*กำหนด i เป็นตัวห้อยตัวแปรสำหรับอาร์เรย์*/
-
var img = document.getElementById ('img'+(i-base+1));/*ตรวจสอบให้แน่ใจว่าตัวแปร IMG คือ IMG1, IMG2, IMG3 ... จนถึง IMG7
if (i <0) / *Array Subscript I <0, ระบุออฟเซ็ต> 0, * / /
-
img.src = imgarray [imgarray.length+i];
-
อื่นถ้า (i> imgarray.length-1)
-
img.src = imgarray [i-imgarray.length];
-
อื่น
-
img.src = imgarray [i];
-
-
-
jzk.app = {}; /*เลเยอร์ชั้นที่สามเลเยอร์*/
jzk.app.initimg = function ()/* เริ่มต้นภาพการแสดงผลนั่นคือเรียกใช้ฟังก์ชั่นกระบวนการ moveimg: พารามิเตอร์คือ 7, ฐานเท่ากับ -7, ฉันเท่ากับ -7, -6, -5, -4, -3, -2, -2, -1 img2 = imgarray [-6+7] ...*/
-
jzk.ui.moveimg (7);/*พารามิเตอร์เริ่มต้นควรตั้งค่าเป็น: จำนวนรูปภาพที่สามารถแสดงได้ (7 ที่นี่); -
-
ไฟล์ทั้งสามนั้นยากที่จะเข้าใจด้วยรหัส JS ฉันยังให้ความเห็นโดยละเอียดข้างต้น หากใครสามารถอ่านได้และไม่เข้าใจคุณสามารถพูดคุยในความคิดเห็นด้านล่าง