缩略图变换

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="adv">
            <img src="img/bd1.jpg" id="bar"><br>
            <img src="img/b1.jpg" id="foo">
            <img src="img/b2.jpg" id="foo">
            <img src="img/b3.jpg" id="foo">

        </div>
        <script>
            let img = document.querySelectorAll('#foo')
            let img1 = document.querySelector('#bar')
            for (let i = 0;i<img.length;i+=1){
                img[i].addEventListener('mouseover',()=>{
                    img1.src = `img/bd${i+1}.jpg`
                })
            }   
        </script>
    </body>
</html>

点击按钮，背景色改变，再次点击，颜色变回原来颜色

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            button{
                width: 100px;
                height: 50px;
                border:none;
                color: darkorange;
                background-color: aquamarine;
                display: block;
                outline: none;
                cursor: pointer;
                margin: 10px auto;
            }
        </style>
    </head>
    <body>
        <button><input type="checkbox" id="check1">按钮1</button>
        <button><input type="checkbox" id="check1">按钮2</button>
        <button><input type="checkbox" id="check1">按钮3</button>
        <button><input type="checkbox" id="check1">按钮4</button>
        <button><input type="checkbox" id="check1">按钮5</button>
        <script>
            let btn = document.querySelectorAll('button')
            let checks = document.querySelectorAll('#check1')
            
            
            for(let i = 0;i<btn.length;i+=1){
                btn[i].addEventListener('click',()=>{
                    if (!checks[i].checked){
                        btn[i].style.backgroundColor = 'lightpink'
                        checks[i].checked=true
                        
                    }else{
                    
                        btn[i].style.backgroundColor = 'aquamarine'
                        checks[i].checked=false
                    
                    }
                })

            }

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