事件概念和事件監聽

時間 2019-11-13

標籤事件概念監聽简体版

原文原文鏈接

事件監聽主要是javascript

使用返回值改變HTML元素的默認行爲java

常見的事件類型node

鼠標事件如通過、點擊先後、鬆開鼠標等數組

還有HTML事件和鍵盤事件this

經過此次能夠完成輪播圖的製做blog

<script type="text/javascript">
   //將路徑封裝到數組中
   var arr=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg","img/6.jpg","img/7.jpg","img/8.jpg"];
   //定義下標
   var index=0;
   //定義圖片元素
   var img;
   //定義定時器變量
   var timer;
   window.onload=function(){
       img=document.getElementById("pic");
       //設置定時器
       timer=window.setInterval(next,2000);
       //當鼠標移動img中止監聽
       img.onmouseover=stop;
       img.onmouseout=start;
   }
   function change(node){
       //獲取按鈕元素value值計算下標
       index=node.value-1;
       //將圖片路徑傳給下標地址
       img.src=arr[index];

   }
   //下一張
   function next(){
       if(index==arr.length-1){
           index=0;

       }else{
           index++;
       }
       img.src=arr[index];
   }
   function up(){
       if(index==0){
           index=arr.length-1;

       }else{
           index--;
       }
       img.src=arr[index];
   }
   //取消定時器
   function stop(){
       window.clearInterval(timer);
   }
   //開始定時
   function start(){
       timer=window.setInterval(next,2000);
   }
   </script>
</head>

<body>
<img src="img/1.jpg" id="pic">
<input type="button" value="上一張" onClick="up()">
<input type="button" value="1" onClick="change(this)">
<input type="button" value="2" onClick="change(this)">
<input type="button" value="3" onClick="change(this)">
<input type="button" value="4" onClick="change(this)">
<input type="button" value="5" onClick="change(this)">
<input type="button" value="6" onClick="change(this)" >
<input type="button" value="7" onClick="change(this)">
<input type="button" value="8" onClick="change(this)">
<input type="button" value="下一張" onClick="next()">
</body>
seo

相關文章

相關標籤/搜索

XLink 和 XPointer 教程

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<