//设置一张图片
<img id="img" src="img/139-15040Q15102.jpg" class="img"/>
<br />
//设置控件
<button style="background-color: red;" class="but1" id="but1" οnclick="btn1()">1</button>
<button class="but1" id="but2" οnclick="btn2()">2</button>
<button class="but1" id="but3" οnclick="btn3()">3</button>
//调用js
<script>
//查找控件并且赋于值
var but1 = document.getElementById("but1");
var but2 = document.getElementById("but2");
var but3 = document.getElementById("but3");
var img = document.getElementById("img");
//点击事件的监听
function btn1(){
but1.style.backgroundColor="red";
but2.style.backgroundColor="white"
but3.style.backgroundColor="white"
img.src="img/139-15040Q15102.jpg";
}
function btn2(){
but2.style.backgroundColor="red";
but1.style.backgroundColor="white"
but3.style.backgroundColor="white"
img.src="img/139-150423095403.jpg";
}
function btn3(){
but3.style.backgroundColor="red";
but2.style.backgroundColor="white"
but1.style.backgroundColor="white"
img.src="img/144-3-1440x900.jpg"
}
</script>