九门宁生

导航

切换图片案例 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
   <input type="button" value="点我" id="btn">
   <br>
   <img src="images/a.jpg" id="mv" alt="" width="400" height="300">

   <script>
     // 1 获取元素
     var btn = document.getElementById('btn');
     var mv = document.getElementById('mv');
     // 2 给按钮注册事件
     var flag = 1;  // 当flag的值是1 的时候 对应a.jpg   当flag的值是2的时候 对应 b.jpg
     btn.onclick = function () {
       // 3 切换图片
       if (flag === 1) {
          mv.src = 'images/a.jpg';
          flag = 2;
       } else if (flag === 2) {
          mv.src = 'images/b.jpg';
          flag = 1;
       }
     }
     
     
   </script>
</body>
</html>

 

posted on 2019-08-23 13:10  九门宁生  阅读(192)  评论(0)    收藏  举报