简易图片浏览

最新推荐文章于 2024-09-08 05:31:05 发布

CodingSir

最新推荐文章于 2024-09-08 05:31:05 发布

阅读量695

点赞数

CC 4.0 BY-SA版权

文章标签： function

本文链接：https://blog.youkuaiyun.com/educast/article/details/3441245

<body> 
  
  <img   id=imgFld>   
  <input   type=button   id=prev   value="上一张"   onclick=prevImg()>   
  <input   type=button   id=next   value="下一张"   onclick=nextImg()>   
    
  共有3张图片，当前显示第<span id="CurrentNum">1</span>张图片   
    
  <script>   
/*  function setIamges()
{
  imgarray[0]=new Image();
  imgarray[1]=new Image();
  imgarray[2]=new Image();
  imgarray[0].src="12345.jpg"; 
  imgarray[1].src="5.jpg"; 
  imgarray[2].src="12345.jpg";  
}*/
  
  var   arrImg=new   Array("12345.jpg","5.jpg","12345.jpg");
    
    
  var   i=0;   
  document.getElementById("imgFld").src=arrImg[0];   
    
  document.getElementById("imgFld").style.cursor="hand";   
  document.getElementById("imgFld").attachEvent('onclick',function(){window.open(document.getElementById("imgFld").src);});   
    
  function   prevImg()   {       
      if(i==0) 
   {alert("已经到第一页了！");   return;}   
      i--;   
      document.getElementById("imgFld").src=arrImg[i]; 
   document.getElementById("CurrentNum").innerHTML=i+1;
    
  }   
    
  function   nextImg()   {       
      if(i==arrImg.length-1)  
   {alert("已经到最后一页了！");  return;}   
      i++;   
      document.getElementById("imgFld").src=arrImg[i]; 
   document.getElementById("CurrentNum").innerHTML=i+1;  
    
  }   
  </script>   
  </body>