【JavaScript】水平无缝滚动

　　　　　　这个内容个人感觉还是挺抽象的，我会根据我目前的了解简单的说一下，解释的可能会不全面，大家可以参考一下，若有错误的地方希望能够提出来，以便及时纠正。

　　　　　　下面是全部的代码，如果有不太了解的地方，在最下面有简单的解释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平无缝滚动</title>
    <style>
        * {margin: 0; padding: 0;}
        ul {list-style: none;  600px; overflow: hidden; display: flex; margin: 50px auto; }
        img { 300px; float: left;}
    </style>
</head>
<body>
    <ul class="cont">
        <li><img src="images/pic01.jpg" alt=""></li>
        <li><img src="images/pic02.jpg" alt=""></li>
        <li><img src="images/pic03.jpg" alt=""></li>
        <li><img src="images/pic04.jpg" alt=""></li>
        <li><img src="images/pic05.jpg" alt=""></li>
    </ul>
<script>
    let cont = document.querySelector(".cont");
    cont.innerHTML += cont.innerHTML;
    let dist = setInterval(function () {
        if (cont.scrollLeft >= cont.offsetWidth/2*5) {
            cont.scrollLeft = 0;
        }
        cont.scrollLeft++;
    }, 10);
    cont.onmouseover = function () {
        clearInterval(dist);
    }
    cont.onmouseout = function () {
        dist = setInterval(function () {
            if (cont.scrollLeft >= cont.offsetWidth/2*5) {
                cont.scrollLeft = 0;
            }
            cont.scrollLeft++;
        }, 10);
    }
</script>
</body>
</html>

.scrollLeft
　　　溢出部分距离左侧边缘的距离（下图红色边框），即轮播时从左侧出去的距离

.offsetWidth
　　　轮播内容的宽度或网页可见区域的宽度，这个要根据实际情况而定（下图黄色边框或绿色区域宽度）

let cont = document.querySelector(".cont");
 cont.innerHTML += cont.innerHTML;　　　　　　//内容加宽实现无缝滚动，好像不加也可以实现，以后会有更新
    let dist = setInterval(function () {　　　　//setInterval(要调用的函数,周期性执行的时间间隔以毫秒计) 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
        if (cont.scrollLeft >= cont.offsetWidth/2*5) {　　//判断溢出部分与轮播内容的距离关系，这里的offsetWidth指的是上图绿色区域的宽度
            cont.scrollLeft = 0;　　　　　　　　　　　　　　　//当溢出部分长度大于或等于内容长度时，让溢出部分重新归零，达到无缝衔接
        }
        cont.scrollLeft++;　　　　　　//以1像素进行移动
    }, 10);
    cont.onmouseover = function () {　　//鼠标悬停事件
        clearInterval(dist);
    }
    cont.onmouseout = function () {　　　//鼠标离开
        dist = setInterval(function () {
            if (cont.scrollLeft >= cont.offsetWidth/2*5) {
                cont.scrollLeft = 0;
            }
            cont.scrollLeft++;
        }, 10);
    }

　　下面代码的offsetWidth指的是轮播内容的宽度（黄色边框）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>three stone</title>
    <style>
        * { margin: 0;padding: 0; }
        ul { list-style: none;  300px;display: flex; overflow: hidden; background-color: #51c2be;}
        li { white-space: nowrap; } 
　　 </style>
</head>
<body>
    <ul class="cont">
        <li class="item1">1.Lorem ipsum dolor.2.Amet, placeat, praesentiu.3.Lorem ipsum dolor sit amet.</li>
        <li class="item2">1.Lorem ipsum dolor.2.Amet, placeat, praesentiu.3.Lorem ipsum dolor sit amet.</li>
    </ul>
<script>
    let cont = document.querySelector(".cont");
    let item1 = document.querySelector(".item1");
    let dist = setInterval(function() {
        if(cont.scrollLeft >= item1.offsetWidth) {
            cont.scrollLeft = 0;
        }
        cont.scrollLeft++;
        // console.log(cont.scrollLeft);
    },30);
</script>
</body>
</html>