在关于一个点击“上一个”、“下一个”按钮，实现图片切换的小测试中。
结构代码如下
<div id="contanier"> <img src="img/1.jpg" alt="图片1" id="pic"> <button id="lastPic">上一张</button> <button id="nextPic">下一张</button> </div>其中，只用了一个img的标签，且img和input都是内联元素。并把所有的标签放在了一个container的父级div标签内部。
样式代码如下，
* { margin: 0; padding: 0; } #contanier { margin:50px auto; width: 500px; /*background-color: #ff0;*/ overflow: hidden; } #contanier img { width: 500px; height: 250px; } #lastPic { width: 6em; height: 2em; float:left; margin-left: 40px; } #nextPic { width: 6em; height: 2em; float:right; margin-right: 40px; }设置#container元素水平居中：margin:0 auto; 如果想在垂直上离窗口有所距离，可设置margin的第一个参数，overflow:hidden是为了消除子元素的浮动使父元素丧失高度，两个按钮是内联元素，为了实现较好的效果，可以设置左右浮动（即实现两列布局），marign-left、margin-right是为了远离左右内边距。最终的效果如下，
js的行为代码
要点：因为结构代码中只含有一个img的标签，为实现不同的图片切换，应该在点击按钮的时候修改img标签的属性src为相应的路径；其次是应该在点击的时候记录点击事件的结果，即设定一个计数的变量cur_num。
下面是自己写的代码，实现了最后的效果，但是扩展性不足，只能实现特定格式的图片名称——“$.jpg”。
window.onload = function () { // 获取按钮对象、 var lastBtn = document.getElementById("lastPic"); var nextBtn = document.getElementById("nextPic"); // 获取图片对象 var pic = document.getElementById("pic"); // 为按钮对象添加事件 var pic_src = "img/1.jpg"; // 设置一个计数的变量，用于标识当前的图片 var cur_num = 1; //默认显示第一张图片 // 视频上的方法 // 当需要操作 容量大的外部文件时 ，而且每次操作代价比较大的情况下，采用索引的方法 // 创建一个数组,保存所有图片的路径名称,当需要切换路径的时候,直接切换索引值即可 // var arrSrc = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg"]; lastBtn.onclick = function () { // 点击一次 // var curstr_old = cur_num.toString(); cur_num -- ; if (cur_num<=0) { cur_num = 5; } // pic_src = pic_src.replace(curstr_old, cur_num.toString()); pic_src = "img/"+cur_num+".jpg"; pic.setAttribute("src", pic_src); }; nextBtn.onclick = function () { // 点击一次 // var curstr_old = cur_num.toString(); cur_num ++ ; if (cur_num>=6) { cur_num = 1; } // pic_src = pic_src.replace(curstr_old, cur_num.toString()); pic_src = "img/"+cur_num+".jpg"; pic.setAttribute("src", pic_src); }; }视屏上的改进代码
改进的要点：将要改变的内容封装到一个数组里边，通过数组的索引去访问不同的路径字符串，通常 改变的内容不容易控制。其次，通过数组可以轻易的知道所有内容的数量信息，方便以后的操作。
window.onload = function () { // 获取按钮对象、 var lastBtn = document.getElementById("lastPic"); var nextBtn = document.getElementById("nextPic"); // 获取图片对象 var pic = document.getElementById("pic"); // 为按钮对象添加事件 var pic_src = "img/1.jpg"; // 设置一个计数的变量，用于标识当前的图片 var cur_num = 0; //默认显示第一张图片 // 视频上的方法 // 当需要操作 容量大的外部文件时 ，而且每次操作代价比较大的情况下，采用索引的方法 // 创建一个数组,保存所有图片的路径名称,当需要切换路径的时候,直接切换索引值即可 var arrSrc = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg"]; lastBtn.onclick = function () { // 点击一次 // var curstr_old = cur_num.toString(); cur_num -- ; if (cur_num<=0) { cur_num = arrSrc.length-1; } // pic_src = pic_src.replace(curstr_old, cur_num.toString()); pic_src = arrSrc[cur_num]; pic.setAttribute("src", pic_src); }; nextBtn.onclick = function () { // 点击一次 // var curstr_old = cur_num.toString(); cur_num ++ ; if (cur_num>=arrSrc.length) { cur_num = 0; } // pic_src = pic_src.replace(curstr_old, cur_num.toString()); pic_src = arrSrc[cur_num]; pic.setAttribute("src", pic_src); }; }重复性的代码？
将重复性的代码封装到一个函数中，改变的内容用实参传进来，js总更是可以传进来函数作为回调函数，这方便了实现对不同的参数（或者对象）完成不同的操作。
典型的例子见https://www.bilibili.com/video/av34087791/?p=97，有时间会自己体验。
如一般情况下
obj.onclick = function () { /* 事件函数主体 */ }如果有多个对象需要添加类似的事件处理函数，可以这样写
function eventPrc (){ /*事件处理函数主体*/ } obj1.onclick = eventPrc; obj2.onclick = eventPrc; .......而且当事件的处理相差较大时，可以使用回调函数来封装函数体。
eventPrc(obj, fun){ obj.onclick = fun; } //添加事件处理函数时 eventPrc(obj1, function(){ //事件处理函数主体 });
