js案例——无缝滚动图片_imgbox.scrollleft 不能改变-CSDN博客

本文链接：https://blog.csdn.net/weixin_47204963/article/details/113147723

无缝滚动图片思路整理：
1.首页是逻辑方面，当滚动到第二组图的第一张时，立马换为第一组图第一张
2.获取一组图片的宽度时，要在新的一组图片复制之前，对于flex项目是img的，一定要给图片设置不伸也不缩；注意为什么是scrollWidth,而不是offsetWidth
3.scrollLleft是父元素中的内容位置，前提是给父元素设置了overflow不为visible；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无缝滚动</title>
    <style>
        .wrapper{
            width: 800px;
            overflow: hidden;
        }
        .img-box {
            display: flex;
            margin:200px auto;
            width: 800px;
            height: 200px;
            /* overflow: auto;
            overflow: hidden; */
        }
        img {
            flex: 0 0 auto;
            width: 200px;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="img-box" id = "img-box">
            <img src="images/1.jpg" alt="">
            <img src="images/2.jpg" alt="">
            <img src="images/3.jpg" alt="">
            <img src="images/4.jpg" alt="">
            <img src="images/5.jpg" alt="">
            <img src="images/6.jpg" alt="">
            <img src="images/7.jpg" alt="">
            <img src="images/8.jpg" alt="">
            <img src="images/9.jpg" alt="">
        </div>
    </div>
    <script>
        var wrapper = document.querySelector('.wrapper');
        var imgBox  = document.querySelector('#img-box');
        console.log(wrapper)
		
        var edg = imgBox.scrollWidth;

       imgBox.innerHTML += imgBox.innerHTML;
       console.log(imgBox)
    //    console.log(imgBox.offsetWidth)
        
        function fn(){
            wrapper.scrollLeft  += 10;
    
            // if(imgBox.scrollLeft >= imgBox.offsetWidth) {
            //     imgBox.scrollLeft = 0;
            // }
            // if(imgBox.scrollLeft >= imgBox.scrollWidth){
            //     imgBox.scrollLeft = 0;
            // }
          
            if(wrapper.scrollLeft >= edg){
                wrapper.scrollLeft = 0;
            }
            
        }
        setInterval(fn,50)
    </script>
</body>
</html>