经常会在网上看到这样的操作：有几个按钮。可以控制器图片的上一张、下一张。那么现在就使用按钮的click单击事件来切换img的图片。
此时由于只是简单的演示，将所有的图片保存在images目录中。所有的图片应该使用相同的命名前缀,如”pic_*.jpg“。假设”*.jpg”的取出范围为：1~3。
注意：如果增加到3了，那么就重新从1开始显示；如果减小到1了，那么就从3开始显示。
范例1：手动切换图片
event.html
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="description" content=event.html""> <meta name="keywords" content="event,html,js"> <title>javascript的程序开发之事件处理</title> <script type="text/javascript" src="event.js"></script> </head> <body> <div id="pictureDiv"> <img src="images/pic_1.jpg" id="picImg"> </div> <div id="buttonDiv"> <button id="previousBtn">上一张</button> <button id="nextBtn">下一张</button> </div> </body> </html>
event.js
/* 要求：使用按钮的单击事件来切换img的图片 */ var index = 1; function picChanged (index) { //获取HTML元素图片对象 var obj = document.getElementById("picImg"); //重新设置图片 obj.src = "images/pic_"+index+".jpg"; } window.onload = function(){ //为onload事件绑定事件 //获取HTML元素上一张按钮对象 var previousBtn = document.getElementById("previousBtn"); //为上一张按钮对象绑定事件 if (previousBtn != undefined) { previousBtn.addEventListener("click",function(){ if (index > 1){ index-- }else{ index = 3; } picChanged(index); },false); }; //获取HTML元素下一张按钮对象 var nextBtn = document.getElementById("nextBtn"); //为下一张按钮对象绑定事件 if (nextBtn != undefined) { nextBtn.addEventListener("click",function(){ if (index < 3) { index++ }else{ index = 1; } picChanged(index); },false); }; }
pic_1.jpg pic_2.jpg
pic_3.jpg
发现，现在的操作都是人为去进行切换，那么也可以实现自动切换。使用setTimeout函数进行自动切换。
setTimeout(执行函数,间隔)：间隔一毫秒为单位
范例2：自动切换图片
event.html
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="description" content=event.html""> <meta name="keywords" content="event,html,js"> <title>javascript的程序开发之事件处理</title> <script type="text/javascript" src="event.js"></script> </head> <body> <div id="pictureDiv"> <img src="images/pic_1.jpg" id="picImg"> </div> </body> </html>
event.js
/* 要求：使用定时器自动来切换img的图片 */ var index = 1; //默认从第一张开始显示 function picChanged () { //切换图片 if (index < 3) { index ++; }else{ index = 1; //已经显示完了，那么需要重新显示 } //获取HTML元素图片对象 var obj = document.getElementById("picImg"); //重新设置图片 obj.src = "images/pic_"+index+".jpg"; //定时器执行操作 setTimeout(function() { picChanged(); }, 1000); } window.onload = function(){ //为onload事件绑定事件 //定时器执行操作 // setTimeout(function() { // picChanged(); // }, 1000); setTimeout(picChanged(),1000); }
总结：
1—每一个HTML元素实际上在JavaScript都表示一个对象，对象可以调用里面的属性；
2—每一个元素都可以利用addEventListener()函数动态绑定，并且最为重要的是，都会在页面加载后绑定；
3—取得元素对象：document.getElementById(“ID名称”)。