How to Change Images using by Javascript | Apple Website Design

October 3, 2021

HTML and JavaSCript Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>practice</title>
</head>
<body>

    <div class="container">

            <div class="box-1">

                <img src="/img/default.jpeg" alt="" class="main-image">

            </div>

            <div class="box-2">

                <div class="childof-box-2" onclick="iphonechangeonClick(this)">
                    <img src="/img/pic-1.png" alt="">
                </div>

                <div class="childof-box-2" onclick="iphonechangeonClick(this)">
                    <img src="/img/pic-2.png" alt="">
                </div>

                <div class="childof-box-2" onclick="iphonechangeonClick(this)">
                    <img src="/img/pic-3.png" alt="">
                </div>

            </div>

    </div>


    <script>

        const iphoneList = document.querySelector('.box-2').children;

        function iphonechangeonClick(event){
            document.querySelector('.main-image').src=event.children[0].src;

            for(let i = 0; i< iphoneList.length; i++){
                iphoneList[i].classList.remove('active');
            }
            event.classList.add('active');

        }

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

CSS Code

.container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.main-image{
    width: 400px;
    height: auto;
}

.childof-box-2{
    border: 2px solid grey;
    margin: 5px;
    border-radius: 6px;
}

.box-2 .childof-box-2 img{
    width: 100px;
    height: auto;
}

.childof-box-2.active{
    border: 2px solid royalblue;
}