JavaScript 类似flash效果的立体图片浏览器

葡萄城技术团队

2010-02-08

PS:显示效果图，大家可以根据自己的需求调整图片的样式哦
JavaScript 类似flash效果的立体图片浏览器

代码

代码如下：

<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> 
<div id="container"> 
<!--左箭头--> 
<img src="j1.jpg" style="left:-25px; top:85px; width:50px; height:50px;" onclick="JavaScript:showImg(-1)"/> 
<!--左边第一个图片--> 
<img id="img01" style="z-index:4; left:31px; top:63px; width:74px; height:74px;" onclick="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;" onclick="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;" onclick="JavaScript:showImg(0)"/> 
<!--右边第二个图片--> 
<img id="img04" style="z-index:5; left:291px; top:32px; width:138px; height:138px;" onclick="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;" onclick="JavaScript:showImg(-2)"/> 
<!--右边第一个图片的遮罩层--> 
<div class="mask" style="z-index:4; left:395px; top:64px; width:74px; height:74px;"></div> 
<!--右箭头--> 
<img src="j2.jpg" style="left:486px; top:85px; width:50px; height:50px;" onclick="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.onload=initImg(); 
</script> 
</body> 
function initimg(){ 
showImg(3); 
} 
window.onload=initimg(); 
</script> 
</body>

javascript 遮罩层