8.圖片切換

時間 2019-11-21

標籤圖片切換简体版

原文原文鏈接

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 
 9     <!--<a href="javacript:;">切換</a>-->
10     <!--<a href="#">切換</a>-->
11     <a href="http://www.baidu.com" style="margin:10px;display: block" onclick="fn();return false;">切換</a>
12     <img id="img" src="image/1.jpg" width="400px"/>
13 
14     <script>
15         //需求：點擊a連接，img圖片切換（行內式）
16         //步驟：
17         //1.獲取事件源和圖片
18         //2.綁定事件
19         //3.書寫事件驅動程序
20 
21         //1.獲取事件源和圖片
22 //        var a = document.getElementsByTagName("a")[0];
23 //        var img = document.getElementById("img");
24 //        //2.綁定事件
25 //        a.onclick = function () {
26 //            //3.書寫事件驅動程序
27 //            img.src = "image/2.jpg";
28 //            //return false的目的是禁止a鏈接跳轉；
29 //            return false;
30 //        }
31         var img = document.getElementById("img");
32         function fn(){
33             img.src = "image/2.jpg";
34         }
35 
36 
37     </script>
38 
39 
40 </body>
41 </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。