lovecoding
/
Web1020


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
							<!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>
        /* css reset */
        body{
            margin: 0;
        }
        li{
            list-style: none;
        }
        ul{
            padding: 0;
            margin:0;
        }
        .clearfix::after{
            content: "";
            display: block;
            clear: both;
        }


        .swiper-content{
            width: 600px;
            border:1px solid black;
            margin: 200px auto;
        }
        .swiper-content .big-img{
            border-bottom: 1px solid black;
            text-align: center;
        }
        .swiper-content .big-img img{
            width: 300px;
        }
        .swiper-content .small-img li{
            float: left;
            width: 149px;
            text-align: center;
            border-right: 1px solid black;
        }
        .swiper-content .small-img li:last-child{
            border:0;
        }
        .swiper-content .small-img img{
            width: 100px;
        }
    </style>
</head>
<body>
    <div class="swiper-content"> 
        <div class="big-img">
            <img class="top-img" src="./image/img1.png" alt="img">
        </div> 
        <div class="small-img">
            <ul class="clearfix">
                <li>
                    <img class="bottom-img" src="./image/img1.png" alt="img">
                </li>
                <li>
                    <img class="bottom-img" src="./image/img2.png" alt="img">
                </li>
                <li>
                    <img class="bottom-img" src="./image/img3.png" alt="img">
                </li>
                <li>
                    <img class="bottom-img" src="./image/img4.png" alt="img">
                </li>
            </ul>
        </div>
    </div>
    <script>
        var bigImg = document.getElementsByClassName("top-img")[0];
        var smallImg1 = document.getElementsByClassName("bottom-img")[0];
        var smallImg2 = document.getElementsByClassName("bottom-img")[1];
        var smallImg3 = document.getElementsByClassName("bottom-img")[2];
        var smallImg4 = document.getElementsByClassName("bottom-img")[3];
        var smallImg = document.getElementsByClassName("bottom-img");
        // console.log(smallImg,smallImg.length)
        
        // var arr = [1,2,3,4,5,6,7];
        // console.log(arr[0]);
        // console.log(arr[1]);
        // console.log(arr[2]);
        // console.log(arr[3]);
        // console.log(arr[4]);
        // console.log(arr[5]);
        // for(var i=0;i<arr.length;i++){
        //     console.log(arr[i]);
        // }


        // 方法二
        for(var i=0;i<smallImg.length;i++){
            smallImg[i].index = i;
            smallImg[i].onmouseover = function(){
                // console.log(smallImg[i]);
                // console.log(i);
                console.log(this.index);
                // bigImg.setAttribute("src",smallImg[i].getAttribute("src"));
                bigImg.setAttribute("src",this.getAttribute("src"));
            }
        }

        // 方法一
        // smallImg1.onmouseover = function(){
        //     // bigImg.src = smallImg1.src;
        //     // bigImg.setAttribute("src",smallImg1.getAttribute("src"));
        //     bigImg.setAttribute("src",this.getAttribute("src"));
        // }
        // smallImg2.onmouseover = function(){
        //     // bigImg.src = smallImg2.src;
        //     bigImg.setAttribute("src",this.getAttribute("src"));
        // }
        // smallImg3.onmouseover = function(){
        //     bigImg.setAttribute("src",this.getAttribute("src"));
        // }
        // smallImg4.onmouseover = function(){
        //     bigImg.setAttribute("src",this.getAttribute("src"));
        // }


        // var obj = {
        //     name:"张三"
        // }
        // obj.age = 18;
        // obj.tal = function(){

        // }
        // console.log(obj);

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