<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style>
input{ width: 15px; height: 15px; background-color: #ccc; border-radius: 100%; border-style: none; }
input:hover{ background-color:#333; }
img{ width: 200px; height: 300px; }
</style>
}
<script type="text/javascript">
window.onload = function(){
var arrImg = ['img/1.png','img/2.png','img/3.png','img/4.png'],
aBtn = document.getElementsByTagName('input'),
oImg = document.getElementById('img');
oImg.src = arrImg[0]
for (var i = 0; i < aBtn.length; i++) {
aBtn[i].index = i;
aBtn[i].onclick = function(){
for (var j = 0; j < aBtn.length; j++) {
aBtn[j].style.backgroundColor = '#ccc'
}//在点击按钮之前先让所有按钮颜色复原，这样就可以实现点击别的按钮时上一个按钮复原的效果
oImg.src = arrImg[this.index];
aBtn[this.index].style.backgroundColor = 'red';
}
}
}
</script>
</head>
<body>
<img id="img" src="">
<input type="button" name="" value="">
<input type="button" name="" value="">
<input type="button" name="" value="">
<input type="button" name="" value="">
</body>
</html>
