requestAnimationFrame使用浏览器原生API无缝滚动方案浏览器原生API无缝滚动方案浏览器原生AP

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>IntersectionObserver</title>
</head>
<style>
    .container {
        margin: 40px auto;
        text-align: center;
    }

    img {
        height: 200px;
        width: 300px;
        /* opacity: 0; */
        /* transition: opacity 1s; */
    }
</style>

<body>
    <div class="container">

    </div>
    <script>
        const containerDom = document.querySelector('.container');
        function addImgs() {
            let img = document.createElement('img');
            img.setAttribute('src', './imgs/1.jpeg');      
            containerDom.appendChild(img);
            window.requestAnimationFrame(addImgs)
        }

        addImgs()
        //可以用于无缝滚动 文字轮播 浏览器原生api 解决定时器动画抖动问题及长时间停留定时器速度减缓问题

    </script>
</body>

</html>