当前位置：网站首页>JS clothing photo album case

JS clothing photo album case

2022-06-24 18:35:00 【Brother Mengfan】

One 、 demand

Move to the small picture below , It will be displayed in the large figure above , At the same time, the current small picture has a red border .

Two 、 case analysis

1、 Event source ： It's a small picture li

2、 Event type ： Move （onmouseover）

3、 Event handler ：

（1） Assign the small image path to the large image path ：img.src = this.children[0].src;

（2） add to Red border class ：className

3、 ... and 、 The code is as follows

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title> Clothes photo album </title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        ul {
            list-style: none;
            overflow: hidden;
        }
        
        ul li {
            float: left;
            width: 50px;
            height: 50px;
            margin-left: 10px;
            margin-top: 20px;
            border: 2px solid #fff;
        }
        
        ul li.active {
            border-color: red;
        }
        
        ul li img {
            width: 46px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <img src="images/1.jpg" id="bigImg">
    <ul>
        <li><img src="images/1.jpg" class="smallImg"></li>
        <li class="active"><img src="images/2.jpg" class="smallImg"></li>
        <li><img src="images/3.jpg" class="smallImg"></li>
        <li><img src="images/4.jpg" class="smallImg"></li>
        <li><img src="images/5.jpg" class="smallImg"></li>
    </ul>

    <script>
        // 1.  Get elements 
        var img = document.querySelector('#bigImg');
        var lis = document.querySelectorAll('li');

        // Traverse li
        for (var i = 0; i < lis.length; i++) {
            // Move the mouse to li On 
            lis[i].onmouseover = function() {
                //console.log(this.children[0].src)
                //  display picture    Give the path of the small picture to the path of the large picture 
                img.src = this.children[0].src;

                // Exclusive 
                for (var j = 0; j < lis.length; j++) {
                    lis[j].removeAttribute('class');
                }
                //  To current li Add the style 
                this.className = 'active';
            };
        }
    </script>
</body>

</html>

原网站

版权声明
本文为[Brother Mengfan]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202211333166766.html