<style>

    *{

        margin: 0;padding: 0;

        list-style: none;

    }

    body{

        background: black;

    }

    .outer{

        margin: 10px auto;

        border: 1px solid white;

        border-radius: 6px;

        background-color: white;

        width: 200px;

        padding: 8px 6px 6px 8px;

    }

    .outer>ul{

        overflow: hidden;

    }

    .outer>ul>li, .outer>ul>li>img{

        /* 两个部分设置内容一样，选择器写在一起。 */

        float: left;

        width: 48px;

        height: 48px;

        /* li的宽高不能直接由内部img撑起？ */

        margin: 0 2px 2px 0;

    }

    /* .outer>ul>li>img{

        width: 48px;

        height: 48px;

    } */

    .outer>ul>li:nth-child(1){

        position:relative;

        /* 相对定位，子绝父相，给后面的loading动态图div使用。 */

    }

    .outer>ul>li:nth-child(1), .outer>ul>li:nth-child(1)>img{

        /* 两个部分设置内容一样，选择器写在一起。 */

        width: 148px;

        height: 148px;

    }

    .outer>li.first div{

    position:absolute;top:0;left:0;

    width:156px;height:156px;

    display:none;

    opacity:0.5;filter:alpha(opacity=50);

    background:#fff url(img/loading.gif) 50% 50% no-repeat;

    /* 给第一个大图li加一个空div，添加loading的背景图。 让图片加载时，显示加载动图 */

    }

    </style>

    <script>

    window.onload = function()

    {

        // var aImg = document.getElementsByTagName('img');

        // for(let i=0; i<aImg.length; i++)

        // {

        //     aImg[i].onmouseover = function()

        //     {

        //         aImg[0].src = this.src;

        //     };

        // };

        var oImg = document.getElementById("box").getElementsByTagName("img");

        var oDiv = document.getElementsByTagName("div")[0];

        // 给第一个大图li加一个空div，添加loading的背景图。 让图片加载时，显示加载动图。

        for (var i = 1; i < oImg.length; i++)

        {

            oImg[i].onmouseover = function ()

            {

                var img = new Image();

                img.src = oImg[0].src = this.src.replace(/small/,"big");

                // replace(); 方法，用于在字符串中用一些字符替换另一些字符。

                // 例如：

                // var str="Visit Microsoft!"

                // document.write(str.replace(/Microsoft/, "W3School"))

                // 输出：Visit W3School!

                oDiv.style.display = "block";

                img.complete ? oDiv.style.display = "none" : (oImg[0].onload = function() {oDiv.style.display = "none"})

                // complete  通过Image对象的complete 属性来检测图像是否加载完成。

                // onload    当图像装载完毕时调用的事件句柄。

                // 所以上面这个三元表达式的意思是：

                // img这个图片对象是否加载完成？

                // 加载完成就让div的display为none。   没有加载完成，就调用img的onload事件，让它加载完成，然后运行function 让div的display为none。

                // js Image()对象onload和预加载

                // https://segmentfault.com/a/1190000011020722?utm_source=tag-newest

            }

        }

    };

    </script>