Js实现轮播图

最新推荐文章于 2024-07-24 11:09:48 发布

是阿信ya

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量109

点赞数

分类专栏： JavaScript 文章标签： javascript css css3

本文链接：https://blog.csdn.net/qq_53972864/article/details/128072478

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!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;
    }

    .box {
        width: 590px;
        height: 470px;
        position: relative;
        margin: auto;
    }

    .image {
        display: none;
        /* filter: opacity(0%); */

        /*调用动画效果*/
        -webkit-animation-name: fadeIn;
        /*动画名称*/
        -webkit-animation-duration: 0.5s;
        /*动画持续时间*/
        -webkit-animation-iteration-count: 1;
        /*动画次数*/
        -webkit-animation-delay: 0s;
        /*延迟时间*/
    }

    button {
        border: 0;
        width: 25px;
        height: 36px;
        font-size: 20px;
        line-height: 36px;
        text-align: center;
        background: #d9d9d9;
        color: #fff;
        position: absolute;
        filter: opacity(50%);
    }

    .left {
        border-radius: 15px 0 0 15px;
        top: 217px;
        left: 0;
    }

    .rigth {
        border-radius: 0 15px 15px 0;
        top: 217px;
        left: 565px;
    }

    .dian {
        position: absolute;
        top: 440px;
        left: 35px;
    }

    ul {
        list-style: none;
        display: flex;
    }

    ul li {
        background: #d9d9d9;
        margin-left: 5px;
        width: 12px;
        height: 12px;
        border-radius: 100%;
    }

    li:hover {
        background: #fff;
    }


    @-webkit-keyframes fadeIn {
        0% {
            opacity: 0;
            /*初始状态 透明度为0*/
        }

        35% {
            opacity: .35;
        }

        50% {
            opacity: .5;
            /*中间状态 透明度为0.5*/
        }

        65% {
            opacity: .65;
        }

        85% {
            opacity: .85;
        }

        100% {
            opacity: 1;
            /*结尾状态 透明度为1*/
        }
    }
</style>

<body>
    <div class="box">
        <div class="image"><img src="./img/1.jpg"></div>
        <div class="image"><img src="./img/2.jpg"></div>
        <div class="image"><img src="./img/3.jpg"></div>
        <div class="image"><img src="./img/4.jpg"></div>
        <div class="image"><img src="./img/5.jpg"></div>
        <div class="dian">
            <ul></ul>
        </div>
        <button type="button" class="left">&lt;</button>
        <button type="button" class="rigth">&gt;</button>
    </div>
</body>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        var box = document.querySelector('.box');
        var image = box.querySelectorAll('.image');
        var bleft = box.querySelector('.left');
        var brigth = box.querySelector('.rigth');
        var ul = box.querySelector('ul');
        var interval;
        for (let i = 0; i < image.length; i++) {
            let li = document.createElement('li');
            ul.appendChild(li);
        }
        image[0].style.display = "block";
        image[0].style.filter = "opacity(100%)";

        var li = ul.querySelectorAll('li');
        var dang = 0;
        for (let i = 0; i < li.length; i++) {
            li[i].onclick = function () {
                dang = i;
                let y = 0;
                stopInterval();
                while (y < image.length) {
                    image[y].style.display = "none";
                    // image[y].style.filter = "opacity(0%)";
                    y++;
                }
                image[i].style.display = "block";
                interval = setInterval(automatic, 5000);
                // image[i].style.filter = "opacity(100%)";
            }
        }

        bleft.onclick = function () {
            stopInterval();
            image[dang].style.display = "none";
            // image[dang].style.filter = "opacity(0%)";
            dang = (dang - 1) % (image.length)
            if (dang == -1) {
                dang = image.length - 1;
            }
            image[dang].style.display = "block";
            // image[dang].style.filter = "opacity(100%)";
            interval = setInterval(automatic, 5000);
        }

        brigth.onclick = function () {
            stopInterval();
            automatic();
            interval = setInterval(automatic, 5000);
        }

        function automatic() {
            image[dang].style.display = "none";
            // image[dang].style.filter = "opacity(0%)";
            dang = (dang + 1) % (image.length)
            image[dang].style.display = "block";
            // image[dang].style.filter = "opacity(100%)";
        }

        interval = setInterval(automatic, 5000);

        function stopInterval() {
            clearInterval(interval);
        }

    })
</script>

</html>

效果展示：
请添加图片描述