鼠标移入切换图片 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                list-style: none;
            }
            ul{
                width: 280px;
                height: 50px;
                background-color: gray;
            }
            ul li{
                text-align: center;
                display: block;
                width: 70px;
                line-height: 50px;
                float: left;
                background-color: #E1E1E1;
            }
            .box{
                width: 280px;
                height: auto;
            }
            img{
                width: 280px;
                height: 280px;
                display: none;
            }
        </style>
        <script type="text/javascript">
            window.onload = function(){
                let oli = document.querySelectorAll("li");
                let oimg = document.querySelectorAll("img");
                for(let i = 0;i<oli.length;i++){
                    oli[i].onmouseover = function(){
                        var index = i;
                        console.log(i);
                        oli[i].style.backgroundColor = "#808080";
                        //先让所有的图片隐藏
                        for(let j = 0;j<oimg.length;j++){
                            oimg[j].style.display = "none";
                        }
                        oimg[index].style.display = "block";
                    }
                    oli[i].onmouseout = function(){
                        oli[i].style.backgroundColor = "#E1E1E1";
                    }
                }
            }
        </script>
    </head>
    <body>
        <ul>
            <li>图片01</li>
            <li>图片02</li>
            <li>图片03</li>
            <li>图片04</li>
        </ul>
        <div class="box">
            <img style="display: block;" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile03.16sucai.com%2F2016%2F10%2F1100%2F16sucai_p20161021027_08b.JPG&refer=http%3A%2F%2Ffile03.16sucai.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650528439&t=70cea732b3f8d985c4657fc7327a9bec" alt="">
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.redocn.com%2Fsheying%2F20140916%2Fzhishanghongshizi_3086419.jpg&refer=http%3A%2F%2Fimg.redocn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650528439&t=71758e1b2b453eebff75484770930b0d" alt="">
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F032120114622%2F200321114622-4-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650528439&t=b95990d5200aada927cef3aadcc49818" alt="">
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp05%2F19100201033TN7-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650528439&t=9779df80201d9a175ce5664f12e50f9d" alt="">
        </div>
    </body>
</html>

 

posted @ 2022-03-22 16:49  st-159  阅读(86)  评论(0)    收藏  举报