原生js实现点击图片和点击按钮切换背景图片案例

Amdah

已于 2022-04-11 21:37:45 修改

阅读量1.5k

点赞数

文章标签： HTML CSS JavaScript 交互设计图片切换

于 2022-04-11 21:37:14 首次发布

本文链接：https://blog.csdn.net/m0_53436502/article/details/124109821

版权

代码验证：我是新手不要喷哦

<!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">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    #left {
        text-align: center;
        width: 230px;
        height: 160px;
        float: left;
        background-color: rgb(236, 41, 41);
        font-size: 13px;
        color: rgb(251, 177, 5);
        font-weight: 600;
        margin-left: -210px;
        transition: all 1s;
    }
    
    #left:hover {
        margin-left: 0;
        cursor: pointer;
    }
    
    #right {
        text-align: center;
        width: 230px;
        height: 160px;
        float: right;
        background-color: rgb(236, 41, 41);
        font-size: 13px;
        color: rgb(247, 175, 7);
        font-weight: 600;
        margin-right: -210px;
        transition: all 1s;
    }
    
    #left_img {
        width: 210px;
        height: 160px;
        float: left;
    }
    
    #right_img {
        width: 210px;
        height: 160px;
        float: right;
    }
    
    #right:hover {
        margin-right: 0;
        cursor: pointer;
    }
    
    #switchover {
        width: 25px;
        height: 150px;
        text-align: center;
        color: rgb(252, 65, 18);
        background-color: orange;
        position: absolute;
        top: 200px;
        margin-left: -25px;
        transition: all 1s;
    }
    
    #switchover div {
        /* float: right; */
        position: absolute;
        left: 20px;
        width: 47px;
        height: 50px;
        line-height: 50px;
        font-size: 20px;
        background-color: orange;
    }
    
    #switchover:hover {
        margin-left: 0;
        cursor: pointer;
    }
    
    #mok3 img {
        float: left;
        width: 8.57rem;
        height: 93px;
    }
    
    body {
        background-repeat: no-repeat;
        background-size: 100%;
        background-position-y: -100px;
        overflow: hidden;
    }
</style>

<body>
    <div id="left">
        <img src="./img/0.png" alt="" id="left_img">点我切换下张图片😊
    </div>
    <div id="right">
        <img src="./img/9.png" alt="" id="right_img">点我切换上张图片😝
    </div>
    <div id="switchover">
        <div>切换</div>点我切换模式😘
    </div>
    <div id="mok3">
        <img src="./img/0.png" alt="">
        <img src="./img/1.png" alt="">
        <img src="./img/2.png" alt="">
        <img src="./img/3.png" alt="">
        <img src="./img/4.png" alt="">
        <img src="./img/5.png" alt="">
        <img src="./img/6.png" alt="">
        <img src="./img/7.png" alt="">
        <img src="./img/8.png" alt="">
        <img src="./img/9.png" alt="">
    </div>
    <script>
        var body = document.body
        var images = document.querySelector('#mok3').querySelectorAll('img');
        var right = document.querySelector('#right')
        var img1 = document.querySelector('#left_img')
        var img2 = document.querySelector('#right_img')
        var left = document.querySelector('#left')
        var flag = 0
            //模块一
        function fn() {
            body.style.backgroundImage = 'url(./img/' + flag + '.png)'
            left.onclick = function() {
                flag++
                if (flag === 10) {
                    flag--
                    alert(`图片播完了！！！
                试试点击上一张😀`)
                }

                img1.src = './img/' + flag + '.png'
                img2.src = './img/' + flag + '.png'
                body.style.backgroundImage = 'url(./img/' + flag + '.png)'
                console.log(flag);

            }
        }
        right.onclick = function() {
            flag--
            if (flag === -1) {
                flag++
                alert(`图片播完了！！！
                试试点击下一张😀`)
            }
            img2.src = './img/' + flag + '.png'
            img1.src = './img/' + flag + '.png'
            body.style.backgroundImage = 'url(./img/' + flag + '.png)'
        }
        fn()


        function fn2() {

            for (var i = 0; i < images.length; i++) { //循环
                images[i].onclick = function() { //images里面的第 i 个 点击事件
                    document.body.style.backgroundImage = 'url(' + this.src + ')';

                }
            }
        }
        fn2()

        function fn3() { //切换按钮模块
            var switchover = document.querySelector('#switchover')
            var mok3 = document.querySelector('#mok3')
            var ip = 0
            mok3.style.display = 'none'
            switchover.onclick = function() {
                ip++
                if (ip % 2 === 0) { //利用能不能取余来控制显示和隐藏模块
                    console.log(ip);
                    left.style.display = 'block'
                    right.style.display = 'block'
                    mok3.style.display = 'none'


                } else {
                    left.style.display = 'none'
                    right.style.display = 'none'
                    mok3.style.display = 'block'


                }

            }
        }
        fn3()
    </script>
</body>

</html>