图片浏览_添加事件监听

Posted 勇往直前

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了图片浏览_添加事件监听相关的知识,希望对你有一定的参考价值。

<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>

 

以上是关于图片浏览_添加事件监听的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript 跨浏览器添加事件监听器

浏览器默认事件,事件监听,事件委托

winform 添加鼠标移动监听

IOS 照片浏览器总结(思想步骤)

jq 循环添加监听事件遇到的坑

在同一个片段中实现多个事件监听器 - Android