js图片向左滑动，向右滑动（美中不足衔接的不够好，以后慢慢改改）

本文链接：https://blog.csdn.net/weixin_42321963/article/details/81865459

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            border: 0;
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        ul {
            list-style: none;
            width: 2895px;
            border: 3px solid orange;
        }

        li {
            float: left;
            margin: 10px;
        }

        div {
            width: 970px;
            height: 308px;
            border: 1px solid red;
            white-space: nowrap;
            overflow: hidden;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div id="d1">
    <ul>
        <li><img src="img/1.jpg"/></li>
        <li><img src="img/2.jpg"/></li>
        <li><img src="img/3.jpg"/></li>
        <li><img src="img/4.jpg"/></li>
        <li><img src="img/5.jpg"/></li>
        <li><img src="img/6.jpg"/></li>
    </ul>
</div>
<div id="d2">
    <ul>
        <li><img src="img/1.jpg"/></li>
        <li><img src="img/2.jpg"/></li>
        <li><img src="img/3.jpg"/></li>
        <li><img src="img/4.jpg"/></li>
        <li><img src="img/5.jpg"/></li>
        <li><img src="img/6.jpg"/></li>
    </ul>
</div>
<script>
    //向左转动图片
    var d1 = document.getElementById("d1");
    var u1 = d1.getElementsByTagName("ul")[0];
    u1.innerHTML += u1.innerHTML;
    function f1() {
        var again = (1 / 2) * d1.scrollWidth;
        if (d1.scrollLeft >= d1.scrollWidth / 2) {
            d1.scrollLeft = 0;
        }
        d1.scrollLeft++;
    }
    setInterval(f1, 30);
    //向右转动图片
    var d2 = document.getElementById("d2");
    var u2 = d2.getElementsByTagName("ul")[0];
    u2.innerHTML += u2.innerHTML;
    d2.scrollLeft = d2.scrollWidth;
    function f2() {
        d2.scrollLeft--;
        if (d2.scrollLeft <= d2.scrollWidth / 2) {
            d2.scrollLeft = d2.scrollWidth;
        }
    }
    setInterval(f2, 30);
</script>

</body>
</html>

结果如下：