JavaScript to achieve Taobao product image switching effect

JavaScript clothing album switching effect (similar to Taobao product image switching), for your reference, the specific content is as follows

Without further ado, let's get straight to the code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #bigImg{
            width: 200px;
        }
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
            /*overflow: hidden;*/
        }
        ul li{
            float: left;
            width: 46px;
            height: 46px;
            margin-left: 10px;
            margin-top: 20px;
            border: 2px solid #ffffff;
        }
        ul .active{
            border-color: red;
        }
    </style>
</head>
<body>
    <img src="img/cloth_01.jpg" id="bigImg">
    <ul>
        <li class="active">
            <a href="">
                <img src="img/cloth_01.jpg" width=46 class="smallImg">
            </a>
        </li>
        <li>
            <a href="">
                <img src="img/cloth_02.jpg" width=46 class="smallImg">
            </a>
        </li>
        <li>
            <a href="">
                <img src="img/cloth_03.jpg" width=46 class="smallImg">
            </a>
        </li>
        <li>
            <a href="">
                <img src="img/cloth_04.jpg" width=46 class="smallImg">
            </a>
        </li>
        <li>
            <a href="">
                <img src="img/cloth_05.jpg" width=46 class="smallImg">
            </a>
        </li>
    </ul>
    
    <!--JS part-->
    <script type="text/javascript">
        // 1. Get the event source var bigImg = document.getElementById("bigImg");
        var smallImgs = document.getElementsByClassName("smallImg");

        for (var i=0;i<smallImgs.length;i++){
            // 2. Traverse the collection and add an event to each img tag smallImgs[i].onmouseover = function (){

                // 3. Event handler // 3.1 Before hovering to each li tag, set the class names of all li tags to empty values for (var j=0;j<smallImgs.length;j++){
                    smallImgs[j].parentNode.parentNode.setAttribute("class","");
                }

                // 3.2 Modify the src attribute value of the large image var smallImgSrc = this.getAttribute("src");
                bigImg.setAttribute("src",smallImgSrc);
                // 3.3 Add a class to the parent tag of the img tag that the mouse is hovering over this.parentNode.parentNode.setAttribute("class","active");

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

Implementation effect diagram:

The first picture is selected by default (the large picture is the first one by default). When the mouse hovers over the corresponding picture, the large picture switches to that picture.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: