有3个图片，分别是1.jpg 2.jpg 3.jpg，分别是红灯，绿灯，黄灯，html里面的路径是img.src="./img/1.jpg" 渲染出100个img节点,每次点击图片的的时候，会自动修改里面的src属性（即自动修改1,2,3）
代码和注释如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box img {
width: 80px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
<script>
// 总的来说，要做的如下
// 找到div,要做的是把100个img节点挂在div后面，
// 点击img的时候，img里面的src会动态修改
var box = document.querySelector("div.box");
// 构造函数,最后面用new操作符来实例化的时候，会自动执行这个构造函数
var TrafficLight = function () {
// 先把图片的src里面的路径默认为1，后面动态修改
// 一开始是img.src="./img/1.jpg",要变的就是里面的数字，所以先用一个变量来接收里面的数字
this.color = 1;
// 默认节点是null,在后面的函数里面要创建dom节点，并挂到树上
this.dom = null;
// 构造函数里面用到初始化，后面定义函数来写初始化的逻辑
this.init();
};
// 构造函数里面用了init(),初始化的时候，先把img挂到div后面，
// 然后，调用点击事件的逻辑，点击事件的逻辑继续在其他函数里面写
TrafficLight.prototype.init = function () {
// 创建一个节点
this.dom = document.createElement("img");
// 这个节点的src,往后再从下一个点击的逻辑里面写color的自增
this.dom.src = "./img/" + this.color + ".jpg";
box.appendChild(this.dom);
// 添加点击事件
// 只要用了这个init（），就会调用这个bingEvent方法
this.bindEvent();
};
// 开始写bindEvent的逻辑
TrafficLight.prototype.bindEvent = function () {
// this到这里，已经发生了变化，当前的this先用that来接收
var that = this;
// 给dom添加点击事件
this.dom.onclick = function () {
// 添加了点击事件会改变颜色，也就是改变src路径，
that.changeColor();
};
};
// 改变src路径的逻辑如下
// 变颜色
TrafficLight.prototype.changeColor = function () {
// 首先 img.src="./img/1.jpg"
this.color++;
// 图片路径只有1,2,3，所以不能一直自增
if (this.color === 4) {
this.color = 1;
}
// 修改创建节点的src属性
// 在初始化的时候，创建了this.dom节点，是一个img
// 这里要做的就是改变img里面的src
this.dom.src = "./img/" + this.color + ".jpg";
};
// 实例化100个对象
// 不用手动写，用for循环来写，会自动生成100个img
for (var i = 0; i < 100; i++) {
new TrafficLight();
}
</script>
</html>
