| 1234567891011121314151617181920212223242526272829303132333435363738394041424344 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style>
- * {
- margin: 0;
- padding: 0;
- }
- #container {
- margin: 10px 20px;
- }
- #container li {
- float: left;
- list-style: none;
- width: 60px;
- height: 60px;
- }
- </style>
- </head>
- <body>
- <div id="container">
- <img src="img/picture-1.jpg" alt="狗屎">
- <ul id="items">
- <li><img src="img/thumb-1.jpg" alt=""></li>
- <li><img src="img/thumb-2.jpg" alt=""></li>
- <li><img src="img/thumb-3.jpg" alt=""></li>
- </ul>
- </div>
- <script>
- var img = document.querySelector('#container>img');
- var images = document.querySelectorAll('#items img');
- for (var i = 0; i < images.length; i += 1) {
- // 事件回调函数在for循环的时候并没有执行所以也取不到循环变量i当前的值
- // JavaScript是动态弱类型语言可以在运行时动态的添加(或删除)对象的属性
- images[i].picture = 'img/picture-' + (i + 1) + '.jpg';
- images[i].addEventListener('mouseover', function(evt) {
- img.src = evt.target.picture;
- });
- }
- </script>
- </body>
- </html>
|
