This example was written by me while studying it all over again. I hope it can help everyone learn together. The effect is shown in the figure:
The html code looks like this:
The code copy is as follows:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Picture browsing tool creation</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><!-- Add three-level mask-->
<img id="img2" onclick=""/>
<div onclick="javascript:jzk.ui.moveImg(2);"></div><!-- Add secondary mask-->
<img id="img3" onclick=""/>
<div onclick="javascript:jzk.ui.moveImg(1);"></div><!-- Add a level of mask-->
<img id="img4" onclick=""/>
<img id="img5" onclick=""/>
<div onclick="javascript:jzk.ui.moveImg(-1);"></div><!-- The same effect as mask1-->
<img id="img6" onclick=""/>
<div onclick="javascript:jzk.ui.moveImg(-2);"></div><!-- The same effect as mask2-->
<img id="img7" onclick=""/>
<div onclick="javascript:jzk.ui.moveImg(-3);"></div><!-- The same effect as mask3-->
<img src="images/next.png" onclick="javascript:jzk.ui.moveImg(1);"/>
</div>
</body>
</html>
The css code is as follows:
The mask1, 2, 3... here is a div covering several photos. The opacity attribute is used to define transparency, which can achieve a sense of hazyness and make the appearance more beautiful.
The code copy is as follows:
body {width: 1340px;height: 500px;background: url(../images/body_bg.gif) no-repeat;}
#pic_browser {width: 860px;height: 192px; position: relative;margin:130px 106px;}
#pic_browser img{position: absolute;border: none;}
.prev {top:76px;left: 0px; }
#img1, .mask3 {width: 106px;height: 70px;left: 45px;top: 61px;z-index: 4;}
#img2, .mask2 {width: 166px;height: 110px;left: 95px;top:41px;z-index: 5;}
#img3, .mask1 {width: 226px;height: 150px;left: 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;right: 0px;}
.mask1, .mask2, .mask3, .mask5, .mask6, .mask7 {background: #fff;position: absolute;}
.mask1, .mask5 {opacity: 0.3;}
.mask2, .mask6 {opacity: 0.5;}
.mask3, .mask7 {opacity: 0.7;}
The js code is as follows:
The code copy is as follows:
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 base=0;
var jzk = {}; /*Define namespace*/
jzk.tools = {};/*Layered first layer*/
jzk.ui = {};/*Layered second layer*/
jzk.ui.moveImg = function(offset)
{
base= (base-offset);
for(var i = base;i< base +7;i++)/*Define i as a variable subscript for array*/
{
var img = document.getElementById('img'+(i-base+1));/*Make sure that the img variable is img1, img2, img3... until img7, these 7 img elements*/
if(i<0) /*Array subscript i<0, indicating offset>0, */
{
img.src =imgArray[imgArray.length+i];
}
else if(i>imgArray.length-1)
{
img.src =imgArray[i-imgArray.length];
}
else
{
img.src = imgArray[i];
}
}
}
jzk.app = {}; /*Layered third layer*/
jzk.app.initImg = function()/* Initialize the display image, that is, call the function moveImg process: the parameter is 7, base is equal to -7, i is equal to -7, -6, -5, -4, -3, -2, -1, and the corresponding elements are img1, img2, ...img7, so there are: img1=imgArray[-7+7], img2=imgArray[-6+7]...*/
{
jzk.ui.moveImg(7);/*Initial parameters should be set to: the number of pictures that can be displayed (7 here); */
}
The three files are difficult to understand by JS code. I have also given detailed comments above. If anyone else can read it and don’t understand it, you can discuss it in the comments below.