這一款圖檔的繪計，來進行應用和展現圖檔，從中起到很好的效果，薦寫以參考和學習，從中可以得到啟發和幫助;與其圖檔組展示方式，在IE6浏覽器中進行濾鏡透明方式來展現，突出了IE6與火狐浏覽器的測試應用程度與支援。
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<div id='container'>
<!-- 左箭頭 -->
<img src="left.png" style="left:-5px;top:85px;" onclick="javascript:showImg(-1)" />
<!-- 左邊第一個圖檔框 -->
<img id="img01" style="z-index:4;left:31px;top:63px;width:74px;height:74px"/>
<!-- 左邊第一個圖檔框的遮罩層 -->
<div class='mask2' style="z-index:4;left:31px;top:63px;width:74px;height:74px" onclick="javascript:showImg(2)" >
</div>
<img id="img02" style="z-index:5;left:71px;top:32px;width:138px;height:138px" />
<div class='mask' style="z-index:5;left:71px;top:32px;width:138px;height:138px" onclick="javascript:showImg(1)"/>
<!-- 中間的圖檔框 -->
<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" />
<!-- 右邊第二個圖檔框的遮罩層 -->
<div class='mask' style="z-index:5;left:291px;top:32px;width:138px;height:138px" onclick="javascript:showImg(-1)" />
<img id="img05" style="z-index:4;left:395px;top:64px;width:74px;height:74px"/>
<div class='mask2' style="z-index:4;left:395px;top:64px;width:74px;height:74px" onclick="javascript:showImg(-2)" />
<!-- 右箭頭 -->
<img src="right.png" style="left:486px;top:85px;" onclick="javascript:showImg(1)" />
</div>
<script type="text/javascript">
//圖檔清單數組
var imgArray = new Array();
imgArray[0] = "1.png";
imgArray[1] = "2.png";
imgArray[2] = "3.png";
imgArray[3] = "4.png";
imgArray[4] = "5.png";
imgArray[5] = "6.png";
imgArray[6] = "7.png";
imgArray[7] = "8.png";
imgArray[8] = "9.png";
imgArray[9] = "10.png";
//預設顯示的圖檔序号
var base = 0;
//通過指定偏移量來顯示數組順序中前或者後的第幾張圖檔
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>
<style>
/* 圖檔浏覽器容器 */
#container{
position:absolute;
left:20%;
text-align:center;
margin-top:150px;
border:0px solid red;
width:500px;
height:198px;
/* 圖檔浏覽器容器中的所有圖檔樣式 */
#container img{
/* 半透明遮罩層 */
.mask{
background:#000;
opacity:0.3; /* CSS标準方式，IE7以上支援 */
filter:Alpha(Opacity='30'); /* 濾鏡透明方式，IE6支援 */
/* 顔色更深的半透明遮罩層 */
.mask2{
opacity:0.5; /* CSS标準方式，IE7以上支援 */
filter:Alpha(Opacity='50'); /* 濾鏡透明方式，IE6支援 */
</style>
</body>
</html>
本文轉自huangyouliang10 51CTO部落格，原文連結:http://blog.51cto.com/1572091hyl10/428930
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)