用javascript做的图片浏览,直接可以用的有效果示例

最新推荐文章于 2022-04-25 23:27:59 发布

守着寂寞守着你

最新推荐文章于 2022-04-25 23:27:59 发布

阅读量954

点赞数

文章标签： javascript class filter function xhtml 浏览器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<style type="text/css">
//图片浏览器容器

#container{position:absolute;}
#container img{position:absolute;}

//半透明遮罩层样式
.mask2{

background:#99FF00;
opacity:0.3;
filter:Alpha(Opacity='30');
position:absolute;
}

//颜色更深的半透明遮罩层样式
.mask{

background:#99FF00;
opacity:0.3;
filter:Alpha(Opacity='50');
position:absolute;
}
</style>

<body οnlοad="initImg();">
<div id="container">


<img src="j1.jpg" style="left:-25px; top:85px; width:50px; height:50px;" οnclick="JavaScript:showImg(-1)"/>


<img id="img01" style="z-index:4; left:31px; top:63px; width:74px; height:74px;" οnclick="JavaScript:showImg(2)"/>


<div class="mask" style="z-index:4; left:31px; top:63px; width:74px; height:74px;"></div>


<img id="img02" style="z-index:5; left:71px; top:32px; width:138px; height:138px;" οnclick="JavaScript:showImg(1)"/>


<div class="mask2" style="z-index:5; left:71px; top:32px; width:138px; height:138px;"></div>


<img id="img03" style="z-index:6; left:151px; top:0px; width:198px; height:198px;" οnclick="JavaScript:showImg(0)"/>


<img id="img04" style="z-index:5; left:291px; top:32px; width:138px; height:138px;" οnclick="JavaScript:showImg(-1)"/>


<div class="mask2" style="z-index:5; left:291px; top:32px; width:138px; height:138px;"></div>


<img id="img05" style="z-index:4; left:395px; top:64px; width:74px; height:74px;" οnclick="JavaScript:showImg(-2)"/>


<div class="mask" style="z-index:4; left:395px; top:64px; width:74px; height:74px;"></div>


<img src="草鹿-八千流02.jpg" style="left:486px; top:85px; width:50px; height:50px;" οnclick="JavaScript:showImg(1)"/>
</div>

<script>

//图片列表数组
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";
imgArray[7]="8.jpg";
imgArray[8]="9.jpg";
imgArray[9]="10.jpg";

//默认显示的图片序号
var base = 0;

//通过制定偏移量来显示数组顺序中的前或者后的几张图片，offset参数为偏移量
function showImg(offset){
base=(base-offset)%imgArray.length;

//显示从base号开始的5个图片
for(var i=base;i<base+5;i++){
var img = document.getElementById("img0"+(i-base+1));

//判断图片是否从前往后循环显示
if(i<0){img.src = imgArray[imgArray.length+i];}

//判断图片是否从后往前循环显示
else if(i>(imgArray.length-1)){img.src=imgArray[i-imgArray.length];}
else {img.src=imgArray[i];}
}
}
//初始化图片浏览器中的图片
function initImg(){
showImg(3);
}

//页面加载后调用
//window.οnlοad=initImg();
</script>
</body>
</html>