この例は、もう一度勉強しながら私によって書かれました。誰もが一緒に学ぶのに役立つことを願っています。効果は図に示されています：
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> <！ - 3レベルマスクを追加します - >
<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コードは次のとおりです。
Mask1、2、3 ...ここにいくつかの写真をカバーするDivがあります。不透明な属性は、透明性を定義するために使用されます。これは、ぼんやりとした感覚を達成し、外観をより美しくすることができます。
コードコピーは次のとおりです。
body {width：1340px; height：500px; background：url（../ images/body_bg.gif）no-Repeat;}
#pic_browser {width：860px; height：192px;位置：相対;マージン：130px 106px;}
#pic_browser img {position：absolute; border：none;}
.prev {top：76px;左：0px; }
＃img1、.mask3 {width：106px; height：70px;左：45px; top：61px; z-index：4;}
＃img2、.mask2 {width：166px; height：110px;左：95px; top：41px; z-index：5;}
＃img3、.mask1 {width：226px; height：150px;左：175px; top：21px; z-index：6;}
＃IMG4 {width：290px; height：192px; left：285px; top：0px; z-index：7;}
＃img5、.mask5 {width：226px; height：150px; right：175px; top：21px; z-index：6;}
＃img6、.mask6 {width：166px; height：110px; right：95px; top：41px; z-index：5;}
＃img7、.mask7 {width：106px; height：70px; right：45px; top：61px; z-index：4;}
.next {top：76px;右：0px;}
.mask1、.mask2、.mask3、.mask5、.mask6、.mask7 {background：#fff; position：absolute;}
.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] = 'images/1.jpg';
imgarray [1] = 'images/2.jpg';
imgarray [2] = 'images/3.jpg';
imgarray [3] = 'images/4.jpg';
imgarray [4] = 'images/5.jpg';
imgarray [5] = 'images/6.jpg';
imgarray [6] = 'images/7.jpg';
varベース= 0;
var jzk = {}; /*名前空間を定義*/
jzk.tools = {};/*層状層*/
jzk.ui = {};/*層状の2番目のレイヤー*/
jzk.ui.moveimg = function（offset）
{
base =（base-offset）;
for（var i = base; i <base +7; i ++）/*arrayの変数添え字として定義*/
{
var img = document.getElementById（ 'img'+（i-base+1））;/*img変数がimg1、img2、img3であることを確認してください。
if（i <0） / *subscript i <0、offset> 0を示します * /
{
img.src = imgarray [imgarray.length+i];
}
else if（i> imgarray.length-1）
{
img.src = imgarray [i-imgarray.length];
}
それ以外
{
img.src = imgarray [i];
}
}
}
jzk.app = {}; /*3番目のレイヤーを重ねた*/
jzk.app.initimg = function（）/*ディスプレイ画像を初期化します。つまり、関数moveimgプロセスを呼び出します。 img2 = imgarray [-6+7] ...*/
{
jzk.ui.moveimg（7）;/*初期パラメーターは次のように設定する必要があります。 */
}
3つのファイルをJSコードで理解するのは困難です。また、上記の詳細なコメントも与えました。他の誰かがそれを読むことができ、それを理解できない場合は、以下のコメントで議論することができます。