1、提前准备一组图片，将图片名称设置一定规律：例如 img1.jpg、img2.jpg
2、编写鼠标点击事件
3、在鼠标点击时间里，判断鼠标点击次数
4、根据不同次数，显示不同的图片
<script type="text/javascript">$(function(){
var items=new Arrays("img1.jpg","img2.jpg","img3.jpg","img4.jpg","img5.jpg")
var i=0
$("#bgImage").click(function(){
i++
if(i>items.length){
i=1
}
$(this).prop("src","img"+i+".jpg")
})
})
</script>
通过JS代码 document.getElementById('divID').style.etElementById('divID').style.display = 'none'。函数可以实现。
1、遮罩层：<div id="back"></div>，即作为背景层，覆盖整个页面。弹出层：<div id="form"></div>，即背景层上的一层，此层可根据#form{top: 10%left: 10%width: 20%height: 30%}，调整弹出层的弹出位置。
2、弹出层和遮罩层全部为div标签，可以利用display来控制显示和隐藏的属性，在js中，显示： document.getElementById('divID').style.display = document.getElementById('divID').style.display = 'none'。
3、显示遮罩层和弹出层，即可用图中popDiv（）函数表示： 其中，showId 表示弹出层的divId, backId 表示遮罩层的divId；函数第去、2行显示弹出层和遮罩，3、4、5行设置遮罩层的长度、宽度。
4、关闭弹出层和遮罩层用hideDiv函数（）， 其中：showId 表示弹出层的divId, backId 表示遮罩层的divId；先关闭弹出层，后关闭遮罩层。
5、点击按钮后，弹出，要给按钮加上onclick函数，<button onclick="popDiv('form','back')">点我，显示弹出层</button>。
6、整体代码如下，css 样式可根据个人的喜好自行添加。
这个问题其实想要实现的效果不难，但关键在于你的数据是灵活变化的还是固定不变的？
（1）如果是固定的，我是指（表格大小，长宽，位置均不变，但图片内容是可以变化的），这个就很容易写，我写了一个简单的Demo
HTML:
<!DOCTYPE html><html>
<head>
<title></title>
<meta http-equiv="Content-type" content="text/html charset=utf-8" />
<style type='text/css'>
.sel tr td{
width: 80px
background:#09f
height: 20px
text-align: center
color:#fff
cursor: pointer
}
table tr td img{display: none} /*这里我先把图片隐蔽了*/
</style>
</head>
<body>
<table>
<tr>
<!-- 给图片添加一个ID -->
<td><img src='../picture/01.jpg' id='img1' /></td>
<td><img src='../picture/02.jpg' id='img2' /></td>
<td><img src='../picture/03.jpg' id='img3' /></td>
</tr>
</table>
<table class="sel">
<tr>
<!--直接在td上添加事件，并传入指定的参数-->
<!-- 这个参数就是对应图片的ID -->
<td onclick="fToggle('img1')" >1</td>
<td onclick="fToggle('img2')" >2</td>
<td onclick="fToggle('img3')" >3</td>
</tr>
</table>
</body>
<script type="text/javascript">
function fToggle(objId){
//触发事件后，根据传入的参数获取对应的图片的display值
var state = document.getElementById(objId).style.display
//再进行设置显示或是隐藏就行了
if( state == 'block' ){
document.getElementById(objId).style.display = 'none'
}
else{
document.getElementById(objId).style.display = 'block'
}
}
</script>
</html>
（2）如果是变化的（指图片多少，表格大小均可以变化），那这里就相对复杂些，不过思路依然是可以沿用上面的思路去做的！这里我就不写了，比较麻烦
