lovecoding
/
W250913


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        .box{
            width: 600px;
            border:3px solid #999;
            margin: 150px auto;
        }
        .big-img{
            width: 600px;
            height: 300px;
            border-bottom: 3px solid #999;
            text-align: center;

        }
        .big-img img{
            height: 100%;
        }
        .small-img{
            width: 600px;
            height: 150px;
        }
        .small-img img{
            height: 150px;
            display: block;
        }
        .small-img li{
            width: 150px;
            float: left;
            border-right: 3px solid #999;
            box-sizing: border-box;

        }
        .small-img li:last-child{
            border-right: none;
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="big-img">
            <img class="main-img" src="./img/img1.png" alt="img1">
        </div>
        <div class="small-img">
            <ul>
                <li>
                    <img src="./img/img1.png" alt="img1">
                </li>
                <li>
                    <img src="./img/img2.png" alt="img2">
                </li>
                <li>
                    <img src="./img/img3.png" alt="img3">
                </li>
                <li>
                    <img src="./img/img4.png" alt="img4">
                </li>
            </ul>
        </div>
    </div>
    <script>
        // 获取大图片
        var oBigImg = document.getElementsByClassName("main-img")[0];
        // 获取小图片列表
        var aSmallImg = document.getElementsByClassName("small-img")[0];
        aSmallImg = aSmallImg.getElementsByTagName("img");
        // console.log(aSmallImg);

        // aSmallImg[0].onmouseover = function(){
        //     var _src = aSmallImg[0].getAttribute("src");
        //     // console.log(_src);
        //     oBigImg.setAttribute("src",_src);
        // }
        // aSmallImg[1].onmouseover = function(){
        //     var _src = aSmallImg[1].getAttribute("src");
        //     oBigImg.setAttribute("src",_src);
        // }
        // aSmallImg[2].onmouseover = function(){
        //     var _src = aSmallImg[2].getAttribute("src");
        //     oBigImg.setAttribute("src",_src);
        // }
        // aSmallImg[3].onmouseover = function(){
        //     var _src = aSmallImg[3].getAttribute("src");
        //     oBigImg.setAttribute("src",_src);
        // }

        for(var i=0;i<aSmallImg.length;i++){
            aSmallImg[i].onmouseover = function(){
                var _src = this.getAttribute("src");
                oBigImg.setAttribute("src",_src);
            }
        }

    </script>
</body>
</html>