17 JS-图片切换PLUS&关闭小广告

图片切换PLUS

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>05 图片切换PLUS</title>
 6     <style type="text/css">
 7         *{
 8             padding: 0;
 9             margin: 0;
10         }
11         #box{
12             border: 1px solid #ccc;
13             width: 430px;
14             height: 70px;
15             padding-top: 430px;
16             background: url('images/big_pic1.jpg') no-repeat;
17         }
18         #box ul li{
19             display: inline-block;
20             margin-right: 15px;
21         }
22     </style>
23 </head>
24 <body>
25     <div id="box">
26         <ul>
27             <li class="item">
28                 <img src="images/pic1.jpg">
29             </li>
30             <li class="item">
31                 <img src="images/pic2.jpg">
32             </li>
33             <li class="item">
34                 <img src="images/pic3.jpg">
35             </li>
36             <li class="item">
37                 <img src="images/pic4.jpg">
38             </li>
39             <li class="item">
40                 <img src="images/pic5.jpg">
41             </li>
42         </ul>
43     </div>
44     <script type="text/javascript">
45         // 1.获取事件源
46         function $(id){
47             return typeof id === 'string' ? document.getElementById(id) : null;
48         }
49         var items = document.getElementsByClassName('item');
50         for(var i = 0;i < items.length; i++){
51             var item  = items[i];
52             item.index = i+1; //  记录每一个item的index，切换图片时调用
53             items[i].onmouseover = function(){
54                 $('box').style.background = ` url('images/big_pic${this.index}.jpg') no-repeat`;
55             }
56         }
57     </script>
58 
59 </body>
60 </html>

关闭小广告

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关闭小广告</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #qe_code{
            width: 180px;
            height: 160px;
            margin: 100px auto;
            position: relative;
        }
        #qe_code img{
            position: absolute;
            right: 0;
        }
        #qe_code #close{
            position: absolute;
            width: 18px;
            height: 18px;
            border: 1px solid #e0e0e0;
            text-align: center;
            line-height: 18px;
            cursor: pointer;
            color: #666;
        }
    </style>
</head>
<body>
    <div id="qe_code">
        <img src="images/phone_taobao.png" id="code">
        <span id="close">X</span>
    </div>
</body>
    <script type="text/javascript">
        window.onload = function () {
            var close = document.getElementById('close');
            var qe_code = document.getElementById('qe_code');
            close.onclick = function () {
                qe_code.parentNode.removeChild(qe_code);
            }
        }
    </script>
</html>

相关阅读:
做汉堡
 作业三读《构建之法》
一个程序员的生命周期--有感
 阅读《构建之法》第13-17章
 阅读<构建之法>10、11、12章
 阅读《构建之法》第8，9，10章
 测试与封装5.2-5.3
作业5 四则运算测试与封装 5.1
阅读5-7章
 做汉堡
原文地址：https://www.cnblogs.com/znyyy/p/11129808.html