Contoh ini ditulis oleh saya saat mempelajarinya lagi. Saya berharap ini dapat membantu semua orang belajar bersama. Efeknya ditunjukkan pada gambar:
Kode HTML terlihat seperti ini:
Salinan kode adalah sebagai berikut:
<html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "en" lang = "en">
<head>
<Title> gambar penciptaan alat penjelajahan </iteme>
<type script = "Text/JavaScript" src = "js/main.js"> </script>
<tautan rel = "stylesheet" type = "text/css" href = "style/css.css">
</head>
<body>
<Div id = "pic_browser">
<img src = "gambar/prev.png" onclick = "javascript: jzk.ui.moveimg (-1);"/>
<img id = "img1" onclick = ""/>
<Div OnClick = "JavaScript: jzk.ui.moveimg (3);"> </div> <!-Tambahkan topeng tiga tingkat->
<img id = "img2" onclick = ""/>
<Div OnClick = "JavaScript: jzk.ui.moveimg (2);"> </div> <!-tambahkan topeng sekunder->
<img id = "img3" onclick = ""/>
<Div onClick = "JavaScript: jzk.ui.moveimg (1);"> </div> <!-Tambahkan level topeng->
<img id = "img4" onclick = ""/>
<img id = "img5" onclick = ""/>
<Div OnClick = "JavaScript: jzk.ui.moveimg (-1);"> </div> <!-Efek yang sama dengan mask1->
<img id = "img6" onclick = ""/>
<Div onClick = "JavaScript: jzk.ui.moveimg (-2);"> </div> <!-Efek yang sama dengan mask2->
<img id = "img7" onClick = ""/>
<Div OnClick = "JavaScript: jzk.ui.moveimg (-3);"> </div> <!-Efek yang sama dengan mask3->
<img src = "gambar/next.png" onclick = "javascript: jzk.ui.moveimg (1);"/>
</div>
</body>
</html>
Kode CSS adalah sebagai berikut:
Mask1, 2, 3 ... di sini adalah div yang mencakup beberapa foto. Atribut Opacity digunakan untuk mendefinisikan transparansi, yang dapat mencapai rasa warisan dan membuat penampilan lebih indah.
Salinan kode adalah sebagai berikut:
body {width: 1340px; tinggi: 500px; latar belakang: url (../ gambar/body_bg.gif) no-rePeat;}
#pic_browser {width: 860px; tinggi: 192px; Posisi: relatif; margin: 130px 106px;}
#pic_browser img {position: absolute; border: none;}
.prev {atas: 76px; kiri: 0px; }
#img1, .mask3 {lebar: 106px; tinggi: 70px; kiri: 45px; atas: 61px; z-index: 4;}
#img2, .mask2 {lebar: 166px; tinggi: 110px; kiri: 95px; atas: 41px; z-index: 5;}
#img3, .mask1 {lebar: 226px; tinggi: 150px; kiri: 175px; atas: 21px; z-index: 6;}
#img4 {lebar: 290px; tinggi: 192px; kiri: 285px; atas: 0px; z-index: 7;}
#img5, .mask5 {lebar: 226px; tinggi: 150px; kanan: 175px; atas: 21px; z-index: 6;}
#img6, .mask6 {lebar: 166px; tinggi: 110px; kanan: 95px; atas: 41px; z-index: 5;}
#img7, .mask7 {lebar: 106px; tinggi: 70px; kanan: 45px; atas: 61px; z-index: 4;}
.next {top: 76px; kanan: 0px;}
.mask1, .mask2, .mask3, .mask5, .mask6, .mask7 {latar belakang: #fff; posisi: absolute;}
.mask1, .mask5 {opacity: 0.3;}
.mask2, .mask6 {opacity: 0.5;}
.mask3, .mask7 {opacity: 0.7;}
Kode JS adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
window.onload = function ()
{
jzk.app.initimg ();
}
var imgarray = array baru ();
imgarray [0] = 'gambar/1.jpg';
imgarray [1] = 'gambar/2.jpg';
imgarray [2] = 'gambar/3.jpg';
imgarray [3] = 'gambar/4.jpg';
imgarray [4] = 'gambar/5.jpg';
imgarray [5] = 'gambar/6.jpg';
imgarray [6] = 'gambar/7.jpg';
var base = 0;
var jzk = {}; /*Tentukan namespace*/
jzk.tools = {};/*Lapisan Lapisan Pertama*/
JZK.UI = {};/*Lapisan Lapisan Kedua*/
jzk.ui.moveimg = fungsi (offset)
{
base = (base-offset);
untuk (var i = base; i <base +7; i ++)/*Tentukan i sebagai subskrip variabel untuk array*/
{
var img = document.geteLementById ('img'+(i-base+1));/*Pastikan variabel IMG adalah img1, img2, img3 ... sampai img7, 7 elemen img ini*/
if (i <0) / *Array Subscript i <0, menunjukkan offset> 0, * /
{
img.src = imgarray [imgarray.length+i];
}
lain jika (i> imgarray.length-1)
{
img.src = imgarray [i-imgarray.length];
}
kalau tidak
{
img.src = imgarray [i];
}
}
}
jzk.app = {}; /*Lapisan ketiga berlapis*/
jzk.app.initimg = function ()/* menginisialisasi gambar tampilan, yaitu, sebut fungsi MoveImg Proses: Parameternya adalah 7, basis sama dengan -7, I sama dengan -7, -6, -5, -4, -3, -2, -1, dan elemen yang sesuai adalah IMG1, IMG2, ... IMG7, Segera: Segera: Segera: Segera: Segera: Segera: IMG7, IMG7, dan IMG7, IMG7, SOUS. img2 = imgarray [-6+7] ...*//
{
JZK.UI.MOVEIMG (7);/*Parameter awal harus diatur ke: Jumlah gambar yang dapat ditampilkan (7 di sini); */
}
Tiga file sulit dipahami dengan kode JS. Saya juga memberikan komentar terperinci di atas. Jika orang lain dapat membacanya dan tidak memahaminya, Anda dapat mendiskusikannya di komentar di bawah.