点击按钮切换图片

最新推荐文章于 2023-08-20 23:34:20 发布

你的孤独虽败犹荣

最新推荐文章于 2023-08-20 23:34:20 发布

阅读量2.4k

点赞数 3

本文链接：https://blog.csdn.net/zhou742626/article/details/78696515

版权

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title>选显卡切换</title>
       <style type="text/css">
           .img0 {
               height: 300px;
               width: 700px;
           }

           .ul0 {
               list-style: none;
           }

           .ul0 li {
               float: left;
               padding: 5px;
               background: gray;
               margin: 5px;
               width: 40px;
               text-align: center;
           }
       </style>
   </head>

   <body>

       <div class="main">
           <img src="img/aaaa.jpg" class="img0" id="img0" />
           <ul class="ul0">
               <li οnclick="change1()">1</li>
               <li οnclick="change2()">2</li>
               <li οnclick="change3()">3</li>
           </ul>
       </div>
       <script type="text/javascript">
           function change1() {
               var img = document.getElementById("img0")
                   //               img.setAttribute("src","img/aaaa.jpg");
               img.src = "img/aaaa.jpg";
           }

           function change2() {
               var img = document.getElementById("img0")
                   //               img.setAttribute("src","img/abc.jpg");
               img.src = "img/abc.jpg";
           }

           function change3() {
               var img = document.getElementById("img0")
                   //               img.setAttribute("src","img/e.jpg");
               img.src = "img/e.jpg";
           }
       </script>
   </body>

</html>