1.         
    2.  
   
  2.         这一款图片的绘计，来进行应用和展现图片，从中起到很好的效果，荐写以参考和学习，从中可以得到启发和帮助;与其图片组展示方式，在IE6浏览器中进行滤镜透明方式来展现，突出了IE6与火狐浏览器的测试应用程度与支持。 
    3.  
   
  3.     
    4.  
   
  4.     
    5.  
   
  5.           !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    6.  
   
  6. <html> 
    7.  
   
  7. <body> 
    8.  
   
  8. <div id='container'> 
    9.  
   
  9.     <!-- 左箭头 --> 
    10.  
   
  10.     <img src="left.png"  style="left:-5px;top:85px;" onclick="javascript:showImg(-1)" /> 
    11.  
   
  11.     <!-- 左边第一个图片框 --> 
    12.  
   
  12.     <img id="img01" style="z-index:4;left:31px;top:63px;width:74px;height:74px"/> 
    13.  
   
  13.     <!-- 左边第一个图片框的遮罩层 --> 
    14.  
   
  14.     <div class='mask2' style="z-index:4;left:31px;top:63px;width:74px;height:74px"  onclick="javascript:showImg(2)" > 
    15.  
   
  15.     </div> 
    16.  
   
  16.  
    17.  
   
  17.     <img id="img02" style="z-index:5;left:71px;top:32px;width:138px;height:138px"  /> 
    18.  
   
  18.     <div class='mask' style="z-index:5;left:71px;top:32px;width:138px;height:138px" onclick="javascript:showImg(1)"/> 
    19.  
   
  19.     </div> 
    20.  
   
  20.     <!-- 中间的图片框 --> 
    21.  
   
  21.     <img id="img03" style="z-index:6;left:151px;top:0px;width:198px;height:198px" onclick="javascript:showImg(0)" /> 
    22.  
   
  22.     <!-- 右边第二个图片框 --> 
    23.  
   
  23.     <img id="img04" style="z-index:5;left:291px;top:32px;width:138px;height:138px" /> 
    24.  
   
  24.     <!-- 右边第二个图片框的遮罩层 --> 
    25.  
   
  25.     <div class='mask' style="z-index:5;left:291px;top:32px;width:138px;height:138px" onclick="javascript:showImg(-1)" /> 
    26.  
   
  26.  
    27.  
   
  27.     </div> 
    28.  
   
  28.     <img id="img05" style="z-index:4;left:395px;top:64px;width:74px;height:74px"/> 
    29.  
   
  29.     <div class='mask2' style="z-index:4;left:395px;top:64px;width:74px;height:74px"  onclick="javascript:showImg(-2)" /> 
    30.  
   
  30.     </div> 
    31.  
   
  31.     <!-- 右箭头 --> 
    32.  
   
  32.     <img src="right.png" style="left:486px;top:85px;" onclick="javascript:showImg(1)" /> 
    33.  
   
  33. </div> 
    34.  
   
  34. <script type="text/javascript"> 
    35.  
   
  35.  
    36.  
   
  36.     //图片列表数组 
    37.  
   
  37.     var imgArray = new Array(); 
    38.  
   
  38.     imgArray[0] = "1.png"; 
    39.  
   
  39.     imgArray[1] = "2.png"; 
    40.  
   
  40.     imgArray[2] = "3.png"; 
    41.  
   
  41.     imgArray[3] = "4.png"; 
    42.  
   
  42.     imgArray[4] = "5.png"; 
    43.  
   
  43.     imgArray[5] = "6.png"; 
    44.  
   
  44.     imgArray[6] = "7.png"; 
    45.  
   
  45.     imgArray[7] = "8.png"; 
    46.  
   
  46.     imgArray[8] = "9.png"; 
    47.  
   
  47.     imgArray[9] = "10.png"; 
    48.  
   
  48.      
    49.  
   
  49.     //默认显示的图片序号 
    50.  
   
  50.     var base = 0; 
    51.  
   
  51.     //通过指定偏移量来显示数组顺序中前或者后的第几张图片 
    52.  
   
  52.     function showImg(offset) 
    53.  
   
  53.     { 
    54.  
   
  54.         base = (base - offset) % imgArray.length; 
    55.  
   
  55.         //显示从base号开始的5个图片 
    56.  
   
  56.         for(var i=base; i<base+5; i++) 
    57.  
   
  57.         { 
    58.  
   
  58.             var img = document.getElementById("img0" + (i-base+1)); 
    59.  
   
  59.             //判断图片是否从前往后循环显示 
    60.  
   
  60.             if(i < 0 ) 
    61.  
   
  61.             { 
    62.  
   
  62.                 img.src=imgArray[imgArray.length+i]; 
    63.  
   
  63.             } 
    64.  
   
  64.             //判断图片是否从后往前循环显示 
    65.  
   
  65.             else if(i > (imgArray.length-1) ) 
    66.  
   
  66.             { 
    67.  
   
  67.                 img.src=imgArray[i-imgArray.length]; 
    68.  
   
  68.             } 
    69.  
   
  69.             else 
    70.  
   
  70.             { 
    71.  
   
  71.                 img.src=imgArray[i]; 
    72.  
   
  72.             } 
    73.  
   
  73.         } 
    74.  
   
  74.     } 
    75.  
   
  75.     //初始化图片浏览器中的图片 
    76.  
   
  76.     function initImg() 
    77.  
   
  77.     { 
    78.  
   
  78.         showImg(3); 
    79.  
   
  79.     } 
    80.  
   
  80.     //在页面加载完成后调用 
    81.  
   
  81.     window.onload = initImg; 
    82.  
   
  82.      
    83.  
   
  83. </script> 
    84.  
   
  84. <style> 
    85.  
   
  85.     /* 图片浏览器容器 */ 
    86.  
   
  86.     #container{ 
    87.  
   
  87.         position:absolute; 
    88.  
   
  88.         left:20%; 
    89.  
   
  89.         text-align:center; 
    90.  
   
  90.         margin-top:150px; 
    91.  
   
  91.         border:0px solid red; 
    92.  
   
  92.         width:500px; 
    93.  
   
  93.         height:198px; 
    94.  
   
  94.     } 
    95.  
   
  95.     /* 图片浏览器容器中的所有图片样式 */ 
    96.  
   
  96.     #container img{ 
    97.  
   
  97.         position:absolute; 
    98.  
   
  98.     } 
    99.  
   
  99.     /* 半透明遮罩层 */ 
    100.  
   
  100.     .mask{ 
    101.  
   
  101.         background:#000; 
    102.  
   
  102.         position:absolute; 
    103.  
   
  103.         opacity:0.3; /* CSS标准方式，IE7以上支持 */ 
    104.  
   
  104.         filter:Alpha(Opacity='30'); /* 滤镜透明方式，IE6支持 */   
    105.  
   
  105.     } 
    106.  
   
  106.     /* 颜色更深的半透明遮罩层 */ 
    107.  
   
  107.     .mask2{ 
    108.  
   
  108.         background:#000; 
    109.  
   
  109.         position:absolute; 
    110.  
   
  110.         opacity:0.5; /* CSS标准方式，IE7以上支持 */ 
    111.  
   
  111.         filter:Alpha(Opacity='50'); /* 滤镜透明方式，IE6支持 */   
    112.  
   
  112.     } 
    113.  
   
  113. </style> 
    114.  
   
  114.  
    115.  
   
  115. </body> 
    116.  
   
  116. </html> 
    117.  
   
  117.          
    118.  
   
  118.      
    119.