图片浏览_添加事件监听

最新推荐文章于 2022-11-11 18:37:19 发布

转载最新推荐文章于 2022-11-11 18:37:19 发布 · 282 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yuefeng123/p/7501242.html

<html>
  <head>
    <title></title>
  <head>
   <script>
     window.onload=function(){
         var imgs=new Array("a.jpg","b.jpg","c.jpg");
         var foot=1;
         //获取按钮
         var preButton=document.getElementById("preButton");
         var nextButton=document.getElementById("nextButton");
         //获取img
         var myimg=document.getElementById("myimg");
         //为按钮添加事件监听
         preButton.addEventListener("click",function(){
            if(foot<=0){
                foot=imgs.length-1;
            }
            myimg.src="d:/picture/"+imgs[foot--];
            //alert(myimg.src);
         },false);

       nextButton.addEventListener("click",function(){
              if(foot>=imgs.length){
                    foot=0;
              }
              myimg.src="d:/picture/"+imgs[foot++];
          // alert(myimg.src);
       },false);
  
     }
   </script>
  <body>
     <span id="myspan">
       <img id="myimg" src="d:/picture/a.jpg" height="60%" />
     </span>
     <div>
        <button type="button" id="preButton">上一张</button>
        <button type="button" id="nextButton">下一张</button>
     <div> 
  </body>
</html>

转载于:https://www.cnblogs.com/yuefeng123/p/7501242.html