<!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>
