图片浏览_添加事件监听

<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>
时间: 2024-10-04 00:25:32

图片浏览_添加事件监听的相关文章

javascript面向对象--观察者模式(为对象添加事件监听功能)

正文开始之前,有这么一个需求: >背景:宁静的夜晚,一天晚上,狗蛋(主人)睡得正香,侠盗高飞(小偷)突然造访. >事件:高飞正准备下手的时候,不料被旺财(狗)发现了,于是旺财叫了起来,狗蛋醒了,高飞逃走了. 分析需求后,可以发现有三个对象: 高飞(小偷) 旺财(狗) 狗蛋(主人) 创建对象的构造函数以及原型方法 //人的构造函数 function Person(name){ this.name=name; //首次创建实例时,为Person的原型添加共有的方法 if(!Person.proto

js添加事件监听

1)对于大多数浏览器添加事件监听使用addEventListener(),此函数使用方式为obj.addEventListener('method','function',bool);如添加鼠标点击事件click,移动 mousemove等,第二个参数为调用的方法,第三个参数表示是否需要捕捉,是一个bool值:true表示使用capture,false表示bubbling,一般情况下都是用FALSE;此方法对于相同的函数只绑定一次,也就是说重复绑定相同的函数,只执行一次该方法.当一个对象同一种动

[转]添加事件监听

我们在制作网页时,常常要制作一些js控件.各js控件虽然制作出来后,但有时要在一起使用时,调用到同样的事件就会引起冲突. 如editselectunit和editselectrole控件同时使用到了document的onclick事件.此时,如果在这两个事件的<script language='javascript'></script>处分别编写如下document.onclick = function() { alert('unit');}; documnet.onclick=f

extjs组件添加事件监听的三种方式 http://blog.sina.com.cn/s/blog_48d7f92901011cfn.html

extjs对组件添加监听的三种方式 在定义组件的配置时设置 如代码中所示: Java代码 xtype : 'textarea', name : 'dataSetField', labelSeparator:'', fieldLabel:'', hideLabel: true, allowBlank: true, height: mainPanelHeight*0.8, anchor:'99%', listeners:{'blur':function(){ alert(1); }} 对组件变量通过

es6 添加事件监听

//定义被侦听的目标对象 var engineer = { name: 'Joe Sixpack', salary: 50 }; //定义处理程序 var interceptor = { set: function (receiver, property, value) { console.log(property, 'is changed to', value); receiver[property] = value; } }; //创建代理以进行侦听 new Proxy(engineer,

使用addeventlistener为js动态创建的元素添加事件监听

点击li弹出内容,并且动态添加li之后有效 <button onclick="addFunction()">点我增加</button> <ul></ul> <script type="text/javascript"> var num = 1; var u=document.querySelector("ul"); function addFunction(){ var l=docume

JRadioButton(单选按钮)添加事件监听

效果图: 代码: import java.io.File ; import java.awt.Container ; import java.awt.GridLayout ; import java.awt.event.WindowAdapter ; import java.awt.event.ItemListener ; import java.awt.event.ItemEvent ; import java.awt.event.WindowEvent ; import javax.swin

javascript 兼容W3c和IE的添加(取消)事件监听方法

事件作为javascript本身的一个必备功能,在目前javascript的使用中是无处不在的,基本要只要写到javascrpt,就会用到javascript事件.下面就说说javascript中的添加事件监听和取消事件监听的方法,当然也要做到兼容W3c和IE.下面是兼容的代码: [javascript] view plain copy //添加事件监听兼容函数 function addHandler(target, eventType, handler){ if(target.addEvent

NavigationView的头部的事件监听

现在App的UI设计中Drawerlayout+NavigationView是一个比较常用的设计了,而以前我一般只是在Navigation中的menu(即下部的item中)添加事件监听,而今天碰到一个需要是要在header中增加事件监听. 需求如下:点击图片,在底部弹出一个弹出窗口. 侧边导航栏布局:  <!--侧边导航栏-->     <android.support.design.widget.NavigationView        android:id="@+id/n