轮播图js

最新推荐文章于 2022-09-28 14:24:40 发布

小芒QVQ

最新推荐文章于 2022-09-28 14:24:40 发布

阅读量94

点赞数

文章标签： JavaScript 轮播图图片切换 DOM操作事件监听

本文链接：https://blog.youkuaiyun.com/qq_61662856/article/details/125258366

版权

学了一点js尝试制作的轮播图，通过这次练习对js有了更多了解，好活当赏ヾ(•ω•`)o

<!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>
    * {
        list-style: none;
        box-sizing: border-box;
        outline: none;
        margin: 0;
        text-align: center;
    }

    #f {
        height: 340px;
        width: 600px;
        overflow: hidden;
        position: relative;
    }

    #a {
        height: 340px;
        width: 2400px;
    }

    #jpg1 {
        float: left;
        height: 340px;
        ;
        width: 600px;
        background-size: 600px;
        background-image: url("./神子3.jpg");
    }

    #jpg2 {
        height: 340px;
        width: 600px;
        float: left;
        background-size: 600px;
        background-image: url("./神子7.jpg");
    }

    #jpg3 {
        height: 340px;
        width: 600px;
        float: left;
        background-size: 600px;
        background-image: url("./神子10.jpg");
    }

    .btn1 {
        height: 50px;
        cursor: pointer;
        color: #fff;
        line-height: 50px;
        font-size: 20px;
        background-color: rgba(172, 80, 164, 0.712);
        display: inline-block;
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -25px;
    }

    .btn2 {
        height: 50px;
        cursor: pointer;
        color: #fff;
        line-height: 50px;
        font-size: 20px;
        background-color: rgba(172, 80, 164, 0.712);
        display: inline-block;
        position: absolute;
        right: 0;
        top: 50%;
        margin-top: -25px;
    }

    .n {
        float: left;
        position: absolute;
        bottom: 0;
        height: 50px;
        width: 100%;
        cursor: pointer;
    }

    .num {
        background-color: #a05;
        color: #fff;
        display: inline-block;
        height: 20px;
        width: 20px;
        border-radius: 50px;
    }
</style>

<body>
    <div id="f">
        <div id="a">
            <div id="jpg1"></div>
            <div id="jpg2"></div>
            <div id="jpg3"></div>
            <div id="jpg1"></div>
        </div>
        <div class="btn1">ヾ(•ω•`)o</div>
        <div class="btn2">(づ￣ 3￣)づ</div>
        <div class="n">
            <div class="num _1">1</div>
            <div class="num _2">2</div>
            <div class="num _3">3</div>
        </div>
    </div>
    <script>
        let btn1 = document.querySelector('.btn1')
        let btn2 = document.querySelector('.btn2')
        let num_1 = document.querySelector('._1')
        let num_2 = document.querySelector('._2')
        let num_3 = document.querySelector('._3')
        let left = 0
        let time
        let num = document.querySelector('.n').querySelectorAll('div')
        console.log(num)
        num_1.onclick = function () {
            imgChange(0)
            num_1.style.backgroundColor = 'pink'
        }
        num_2.onclick = function () {
            imgChange(1)
        }
        num_3.onclick = function () {
            imgChange(2)
        }

        btn1.onclick = function () {
            let _1go = Math.floor(-left / 600) - 1
            if (_1go == -1) {
                _1go = 2
            }
            imgChange(_1go)
        }
        btn2.onclick = function () {
            let _2go = Math.floor(-left / 600) + 1
            if (_2go == 4) {
                _2go = 1
            }
            imgChange(_2go)
        }
        run()
        function icoChange(m) {
            console.log(m);
            for (let i = 0; i < num.length; i++) {
                num[i].style.backgroundColor = ''
            }
            num[m].style.backgroundColor = 'pink'
        }
        function run() {
            if (left <= -1800) {
                left = 0
            }
            let m = Math.floor(-left / 600);
            a.style.marginLeft = left + 'px'
            let n = (left % 600 == 0) ? 2000 : 5
            left -= 1
            timer = setTimeout(run, n)
            icoChange(m)
        }
        function imgChange(n) {
            let imgGo = (-600) * n
            a.style.marginLeft = imgGo + 'px'
            left = imgGo
        }
    </script>
</body>

</html>