幻灯片

 1. test.aspx
<img src='upLoadFiles/newCar/62320080319182515.jpg'
                                   alt='image'
                                   width="60"
                                   height="50" 
                                   class="carInfoImageList"
                                   style="cursor:hand;"
                                   onclick="LoadBigPic('upLoadFiles/newCar/62320080319182515.jpg')" onerror="this.src='/images/wutu.jpg'" />
 <img src='upLoadFiles/newCar/62320080319182515.jpg'
                                   alt='image'
                                   width="60"
                                   height="50" 
                                   class="carInfoImageList"
                                   style="cursor:hand;"
                                   onclick="LoadBigPic('upLoadFiles/newCar/62320080319182515.jpg')" onerror="this.src='/images/wutu.jpg'" />
 <img src='upLoadFiles/newCar/62320080319182515.jpg'
                                   alt='image'
                                   width="60"
                                   height="50" 
                                   class="carInfoImageList"
                                   style="cursor:hand;"
                                   onclick="LoadBigPic('upLoadFiles/newCar/62320080319182515.jpg')" onerror="this.src='/images/wutu.jpg'" />
 <img src='upLoadFiles/newCar/62320080319182515.jpg'
                                   alt='image'
                                   width="60"
                                   height="50" 
                                   class="carInfoImageList"
                                   style="cursor:hand;"
                                   onclick="LoadBigPic('upLoadFiles/newCar/62320080319182515.jpg')" onerror="this.src='/images/wutu.jpg'" />
<a href="javascript:window.open('ViewImage.htm.htm','','width=750px,height=600px,top=20px,left=200px, status=no, scrollbars=yes')"  target="_blank"><img src="upLoadFiles/<% =ImgType%>/<% =BigImgUrl%>" id="img_Big" onload="resizeImage(this,273,157)" width="273" height="157" class="carInfoShowImg" onerror="this.src='/images/wutu.jpg'"  /></a>

2.viewImage.html
<!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>
    <script type="text/javascript">
   
    var nFlag=0;
    var photos = new Array();
   
    function  getImages()
    {
   
     var images=  window.opener.document.documentElement.getElementsByTagName("img");
  
     for(var i=0;i<images.length;i++)
     {
       if(images[i].getAttribute("alt")=="image")
   
       {
          photos.push(images[i].src);
       }
    }
   

    }
   
   function resizeImage(obj, MaxW, MaxH)
 {
    var imageObject = obj;

     if(imageObject.readyState!='complete')
       {

         return false;
      }
   
   
    var oldImage = new Image();
    oldImage.src = imageObject.src;
    var dW = oldImage.width;
    var dH = oldImage.height;
    if(dW>MaxW || dH>MaxH)
     {
          a = dW/MaxW;
           b = dH/MaxH;
             if( b>a ) a = b;
            dW = dW/a;
            dH = dH/a;
       }
     if(dW > 0 && dH > 0)
      {
         imageObject.width = dW;
         imageObject.height = dH;
     }
}


    function showImage()
    {
        if (photos.length > 0)
        {
         
            var image = document.getElementById('imgPhoto');
            image.src = photos[nFlag];
   
         if(nFlag==0)
         {
          document.getElementById("BtnPre").disabled=true;
         }
         else
         {
          document.getElementById("BtnPre").disabled=false;
         }
       
           
         if( nFlag==(photos.length-1) )
         {
          document.getElementById("BtnNext").disabled=true;
         }
         else
         {
          document.getElementById("BtnNext").disabled=false;
         }
        

         if(image)
          {
              resizeImage(image,600,450);
          }
        }
       
     
    }
   
    function next()
    {
      if (photos.length > 0)
        {
       
         if( nFlag<photos.length-1)
         {
           nFlag++;
         }
        
         showImage();
        
        
        }
     
    }  
   
    function pre()
    {
      if (photos.length > 0)
        {
       
       
         if( nFlag>0)
         {
           nFlag --;
         }
        
         showImage();
        
       
        }
     
    }  
   
    function clickImage(image)
    {
   
    var index=-1;
    for(var i=0;i<photos.length;i++)
    {
       if(getImageUrl(photos[i])==getImageUrl(image.src))
       {
       index=i;
       break;
       }
      
    }
   
    if(index>-1)
    {
      nFlag=index;
      showImage();   
    }
   
   
    }
   
    function getImageUrl(sUrl)
    {
      var index=sUrl.lastIndexOf("/");
      var url=sUrl.substring(index+1);
      return url;
    }
   
  
    function getTitle()
    {
      
   
      // document.title= window.opener.document.getElementById("newCarTitle").innerHTML;
   
    }
  
    </script>

</head>
<body onload="getImages();showImage();getTitle();" style="text-align:center; padding:20px  auto 0 auto; background-color:#505050;">

   
    <div>

    <img id="imgPhoto" onload="resizeImage(this,600,485)" alt="" class="photo" src="CarImage/NewCarImage/8220080116110617.jpg" style=" border:2px solid #000000;" />
        <table style="560px; text-align:center;">
      
            <tr>
                <td style=" 200px; text-align:center;">
                    <input id="BtnPre" type="button" value="上一张" onclick="pre();"   /></td>
                <td style=" 200px; text-align:center;">
                    <input id="BtnNext" type="button" value="下一张"  onclick="next();"/></td>
                    <td style=" 200px; text-align:center;">    <input id="btnPrint" type="button" value="打印"  onclick="window.print();"/> </td>
                    <td style=" 200px; text-align:center;"> <input id="btnClose" type="button" value="关闭窗口"  onclick="return window.close();"/></td>
            </tr>
        
        </table>
    </div>

</body>
</html>

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/luluping/p/1215479.html