lovecoding
/
web0715


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
							<!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>
        body,ul{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }

        .clearfix::after{
            content: "";
            display: block;
            clear: both;
        }

        .box{
            width: 600px;
            border: 1px solid black;
            margin: 200px auto;
        }
        .box .main-img{
            text-align: center;
        }
        .box .main-img img{
            width: 300px;
        }
        .box .slider-img{
            border-top: 1px solid black;
        }
        .box .slider-img img{
            width: 145px;
        }
        .box .slider-img li{
            float: left;
            border-left: 1px solid black;
        }
        .box .slider-img li:first-child{
            border:0;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="main-img">
            <img src="./image/img1.png" alt="img1">
        </div>
        <div class="slider-img">
            <ul class="clearfix">
                <li>
                    <img src="./image/img1.png" alt="img">
                </li>
                <li>
                    <img src="./image/img2.png" alt="img">
                </li>
                <li>
                    <img src="./image/img3.png" alt="img">
                </li>
                <li>
                    <img src="./image/img4.png" alt="img">
                </li>
            </ul>
        </div>
    </div>
    <script>
        var imgArr = document.getElementsByTagName("img");

        
        for(var i=1;i<=4;i++){
            imgArr[i].onmouseenter = function(){
                console.log(i);
                var _src = imgArr[i].getAttribute("src");
                imgArr[0].setAttribute("src",_src);
            }
        }
        
        
        // 方法二 循环绑定事件
        // for(var i=1;i<=4;i++){
        //     imgArr[i].onmouseenter = function(){
        //         var _src = this.getAttribute("src");
        //         imgArr[0].setAttribute("src",_src);
        //     }
        // }

        // 方法一 给每一个图片绑定事件
        //var imgArr = document.getElementsByTagName("img");
        // imgArr[1].onmouseenter = function(){
        //     // var _src = imgArr[1].getAttribute("src");
        //     var _src = this.getAttribute("src");
        //     imgArr[0].setAttribute("src",_src);
        // }

        // imgArr[2].onmouseenter = function(){
        //     var _src = this.getAttribute("src");
        //     imgArr[0].setAttribute("src",_src);
        // }

        // imgArr[3].onmouseenter = function(){
        //     var _src = this.getAttribute("src");
        //     imgArr[0].setAttribute("src",_src);
        // }

        // imgArr[4].onmouseenter = function(){
        //     var _src = this.getAttribute("src");
        //     imgArr[0].setAttribute("src",_src);
        // }
    </script>
</body>
</html>