<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片滚动</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
            box-sizing: border-box;
        }
        ul {
            list-style: none;
        }
        li {
            border: 2px solid #fffb3a;

        }
        div {
            width: 740px;
            height: 250px;
            border: 1px solid #14ffdc;
            margin: 0 auto;
            background-color: #d8d8d8;
            overflow: hidden;
        }
        .ad ul{
            width: 4000px;
        }
        li{
            float: left;
        }
    </style>
</head>
<body>
<div class="ad">
    <ul>
        <li><img src="a/a1.jpg" height="240" width="180"/></li>
        <li><img src="a/a2.jpg" height="240" width="171"/></li>
        <li><img src="a/a3.jpg" height="240" width="169"/></li>
        <li><img src="a/a4.jpg" height="240" width="165"/></li>
        <li><img src="a/a5.jpg" height="240" width="173"/></li>
        <li><img src="a/a6.jpg" height="240" width="183"/></li>
        <li><img src="a/a7.jpg" height="240" width="171"/></li>
        <li><img src="a/a8.jpg" height="240" width="167"/></li>
        <li><img src="a/a9.jpg" height="240" width="171"/></li>
    </ul>

</div>
<script>
    let aa = document.getElementsByClassName("ad")[0];
    let bb = aa.getElementsByTagName("ul")[0];
    bb.innerHTML += bb.innerHTML;
    function cc() {
        // document.title =aa.scrollLeft;
        if (aa.scrollLeft >= 1584) {
            aa.scrollLeft = 0
        }
        aa.scrollLeft++;
    }
    setInterval(cc, 20);

</script>
</body>
</html>