这个非常简单，就是根据点击事件来交替两张图片而已。如果你要拓展成变N次的，可以事先准备好相应的图片，然后写一个数组来依次变化图片src即可。
例如：点击变化“红、黄、绿、蓝”四色，事先做好4张图片：eg_blub_red.gif、eg_blub_yellow.gif、eg_blub_green.gif 和 eg_blub_blue.gif。然后JS里这样写：
var bulbColors = ['red', 'yellow', 'green', 'blue']var idx = 0 // 索引
function changeImage() {
var imgUrl = '/i/eg_blub_' + bulbColors[idx] + '.gif',
element = document.getElementById('myimage')
element.src = imgUrl // 更换图片
idx++
if (idx == bulbColors.length) {
idx = 0
}
}
<html><head>
<script>
function lighton()
{
document.getElementById('myimage').src="/i/eg_bulbon.gif"//获取id为myimage的元素并改变他的来源
}
function lightoff()
{
document.getElementById('myimage').src="/i/eg_bulboff.gif"
}
</script>
</head>
<body>
<img id="myimage" onmousedown="lighton()" onmouseup="lightoff()" src="/i/eg_bulboff.gif" />
<p>onmousedown 为鼠标点下去的事件 onmouseup为释放鼠标的事件</p>
<p>按住鼠标不放可以点亮这盏灯！</p>
</body>
</html>
其实就是一个多开关的串联回路1·首先把灯泡的一端接零线
2·灯泡的另外一端接时间继电器的常闭触点
3·从时间继电器另一端的常闭触点接手动开关
4·手动开关的另一端再接一个急停开关的常闭触点
5·从常闭触点的另一端接火线
