Javascript特效：图片切换（类似于电商网站图片查看）的封装实现和闭包实现-CFANZ编程社区

知识点

重读度高的代码要考虑能否封装
凡是CSS属性，必须使用style修改。自身标签属性不需要。

运行效果

鼠标移动到下面不同的图片上，上面的图片会发生变化。

Javascript特效：图片切换（类似于电商网站图片查看）的封装实现和闭包实现_封装

Javascript特效：图片切换（类似于电商网站图片查看）的封装实现和闭包实现_html_02

代码

封装实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin: 0;padding: 0;list-style: none;}
        #box{
            border: 1px solid #cccccc;
            width: 650px;
            height: 150px;
            padding-top: 360px;
            margin: 100px auto;
            background: url("images/阿鲁1.gif") no-repeat center 30%;
            background-size: 60% 60%;
        }
        ul{
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="box">
    <ul>
        <li id="li01"><img src="images/阿鲁1.gif" alt=""></li>
        <li id="li02"><img src="images/阿鲁2.gif" alt=""></li>
        <li id="li03"><img src="images/阿鲁3.gif" alt=""></li>
        <li id="li04"><img src="images/阿鲁4.gif" alt=""></li>
        <li id="li05"><img src="images/阿鲁5.gif" alt=""></li>
    </ul>
</div>
<script>
    window.onload = function (ev) {
        // 1. 获取标签
        var li01 = $('li01'),li02 = $('li02'),li03 = $('li03'),li04 = $('li04'),li05 = $('li05');
        var box = $('box');
        // 2. 接听鼠标事件
        liLis(li01,1);
        liLis(li02,2);
        liLis(li03,3);
        liLis(li04,4);
        liLis(li05,5);

    };

    /**
     * 根据id获取标签
     * @param {string}id
     */
    function $(id) {
        return typeof id === 'string' ? document.getElementById(id) : null ;
    }

    /**
     * 改变传入的标签的北京
     * @param {string}liID
     * @param {number}imgID
     */
    function changeImg(liID, imgID) {
        $(liID).style.background = 'url("images/阿鲁'+ imgID +'.gif") no-repeat center 30%';
        $(liID).style.backgroundSize = '60% 60%';
    }

    /**
     *
     * @param {string}liID
     * @param {number}imgId
     */
    function liLis(liID, imgId) {
        liID.onmouseover = function () {
            changeImg('box',imgId);
        }
    }
</script>
</body>
</html>

闭包实现

1. 闭包
(function (tag) {

})(flag)
获取flag的值，传递给tag，立即执行其中的函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin: 0;padding: 0;list-style: none;}
        #box{
            border: 1px solid #cccccc;
            width: 650px;
            height: 150px;
            padding-top: 360px;
            margin: 100px auto;
            background: url("images/阿鲁1.gif") no-repeat center 30%;
            background-size: 60% 60%;
        }
        ul{
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="box">
    <ul>
        <li id="li01"><img src="images/阿鲁1.gif" alt=""></li>
        <li id="li02"><img src="images/阿鲁2.gif" alt=""></li>
        <li id="li03"><img src="images/阿鲁3.gif" alt=""></li>
        <li id="li04"><img src="images/阿鲁4.gif" alt=""></li>
        <li id="li05"><img src="images/阿鲁5.gif" alt=""></li>
    </ul>
</div>
<script>
    window.onload = function (ev) {
        // 1.获取需要的标签
        var box = document.getElementById('box');
        var allLis = box.getElementsByTagName('li');
        // 2. 接听鼠标进入li标签
        for (var i = 0; i < allLis.length ; i++) {
            // 2.1 取出单独li标签
            var sLi = allLis[i];
            (function (tag) {
                // 每一次将i+1的值传给tag，tag记录i+1的值
               sLi.onmouseover = function (ev1) {
                   box.style.background = 'url("images/阿鲁'+ tag +'.gif") no-repeat center 30%';
                   box.style.backgroundSize = '60% 60%';
               }
            })(i+1)
        }
    };
</script>
</body>
</html>