js切换图片 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <img src="img/img_01.jpg" alt="" width="250">
 9 
10 <script>
11     window.onload = function (ev) {
12         var logo = document.getElementsByTagName('img')[0];
13 
14         // 1) 新的事件
15         logo.onmouseover = function (ev1) {
16             console.log('-------鼠标进入图片');
17             this.setAttribute('src', 'img/img_02.jpg');
18         };
19 
20         logo.onmouseout = function (ev1) {
21             console.log('-------鼠标离开图片');
22             this.setAttribute('src', 'img/img_01.jpg');
23         };
24 
25         logo.onmousemove = function (ev1) {
26             console.log('-------鼠标在图片上移动');
27         };
28     }
29 </script>
30 </body>
31 </html>
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title></title>
 7     <style>
 8         * {
 9             margin: 0;
10             padding: 0;
11             list-style: none;
12         }
13 
14         #box {
15             border: 1px solid #cccccc;
16             width: 360px;
17             height: 70px;
18             padding-top: 360px;
19             margin: 100px auto;
20             background: url("images/01big.jpg") no-repeat;
21         }
22 
23         ul {
24             display: flex;
25             justify-content: center;
26             align-items: center;
27             cursor: pointer;
28         }
29     </style>
30 </head>
31 
32 <body>
33     <div id="box">
34         <ul>
35             <li id="li01"><img src="images/01.jpg" alt=""></li>
36             <li id="li02"><img src="images/02.jpg" alt=""></li>
37             <li id="li03"><img src="images/03.jpg" alt=""></li>
38             <li id="li04"><img src="images/04.jpg" alt=""></li>
39             <li id="li05"><img src="images/05.jpg" alt=""></li>
40         </ul>
41     </div>
42     <script>
43         window.onload = function (ev) {
44             // 1. 获取标签
45             var li01 = document.getElementById('li01');
46             var li02 = document.getElementById('li02');
47             var li03 = document.getElementById('li03');
48             var li04 = document.getElementById('li04');
49             var li05 = document.getElementById('li05');
50             var box = document.getElementById('box');
51 
52             // 2. 监听鼠标的事件
53             li01.onmouseover = function (ev1) {
54                 box.style.background = 'url("images/01big.jpg") no-repeat'
55             };
56             li02.onmouseover = function (ev1) {
57                 box.style.background = 'url("images/02big.jpg") no-repeat'
58             };
59             li03.onmouseover = function (ev1) {
60                 box.style.background = 'url("images/03big.jpg") no-repeat'
61             };
62             li04.onmouseover = function (ev1) {
63                 box.style.background = 'url("images/04big.jpg") no-repeat'
64             };
65             li05.onmouseover = function (ev1) {
66                 box.style.background = 'url("images/05big.jpg") no-repeat'
67             }
68         }
69     </script>
70 </body>
71 
72 </html>

 1 <script>
 2     window.onload = function (ev) {
 3         // 1. 获取标签
 4         var li01 = $('li01');
 5         var li02 = $('li02');
 6         var li03 = $('li03');
 7         var li04 = $('li04');
 8         var li05 = $('li05');
 9         // 2. 监听鼠标的事件
10         li01.onmouseover = function (ev1) {
11             changeImg('box', 1);
12         };
13         li02.onmouseover = function (ev1) {
14             changeImg('box', 2);
15         };
16         li03.onmouseover = function (ev1) {
17             changeImg('box', 3);
18         };
19         li04.onmouseover = function (ev1) {
20             changeImg('box', 4);
21         };
22         li05.onmouseover = function (ev1) {
23             changeImg('box', 5);
24         }
25     };
26 
27     function $(id) {
28         return typeof id === 'string' ? document.getElementById(id): null;
29     }
30     function changeImg(liId, index) {
31         $(liId).style.background = 'url("images/0'+ index + 'big.jpg") no-repeat';
32     }
33 </script>
 1  window.onload = function (ev) {
 2         // 1. 获取需要的标签
 3         var box = document.getElementById('box');
 4         var allLis = box.getElementsByTagName('li');
 5 
 6         // 2. 监听鼠标进入li标签
 7         for (var i = 0; i < allLis.length; i++) {
 8              // 2.1 取出单独的li标签
 9             var sLi = allLis[i];
10             sLi.index = i+1;
11             sLi.onmouseover = function (ev1) {
12                 box.style.background = 'url("images/0'+ this.index +'big.jpg") no-repeat'
13             }
14 
15         }
16     }   
 1  window.onload = function (ev) {
 2         // 1. 获取需要的标签
 3         var box = document.getElementById('box');
 4         var allLis = box.getElementsByTagName('li');
 5 
 6         // 2. 监听鼠标进入li标签
 7         for (var i = 0; i < allLis.length; i++) {
 8              // 2.1 取出单独的li标签
 9             var sLi = allLis[i];
10             sLi.index = i+1;
11             // 闭包  封闭作用域
12            (function (tag) {
13                 sLi.onmouseover = function (ev1) {
14                     box.style.background = 'url("images/0'+ tag +'big.jpg") no-repeat'
15                 }
16             })(i+1) // 1, 2, 3, 4, 5*/     i+1实参 tag 形参
17 
18         }
19     }

 

posted @ 2019-07-15 21:27  疏影横斜水清浅  阅读(377)  评论(0)    收藏  举报