css 简单的点击按钮更换展示的图片

//设置一张图片

<img id="img" src="img/139-15040Q15102.jpg" class="img"/>
  <br />

//设置控件
  <button style="background-color: red;" class="but1" id="but1" onclick="btn1()">1</button>
  <button class="but1" id="but2" onclick="btn2()">2</button>
  <button class="but1" id="but3" onclick="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>