效果图示意

完整代码

源代码地址：blog.csdn.net/normol/arti…

原作者用的table存放的图片，我这里改成div了，会比用table更简洁一点，但要注意设置存放的容器为flex布局，否则会出现图片无法滚动的问题

//CSS部分
.box{
    display: flex;
    width: 1440px;
    height: 150px;
    border:1px solid #e8e8e8;
    margin-top: 10px;
    overflow: hidden;
    background-color:yellow;
}
.tt {
    width: 352px;
    height: 106px;
    margin-left: 16px;
    margin-right: 16px;
    margin-top: 10px;
    display: block;
    }
.box ul{
    display: flex;
}

//HTML部分
<div class="box" id="colee_left" >
        <div id="colee_left1">
            <ul>
                <li>
                    <a href="#">
                        <div>
                            <img class="tt" src="" />
                        </div>

                    </a>
                </li>
                <li>
                    <a href="#">
                        <div>
                            <img class="tt" src="" />
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div>
                            <img class="tt" src="" />
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div>
                            <img class="tt" src="" />
                        </div>
                    </a>
                </li>
            </ul>

        </div>
        <div id="colee_left2"></div>
    </div>

//script部分
 var speed = 30;
    //速度数值越大速度越慢
    var colee_left2 = document.getElementById("colee_left2");
    var colee_left1 = document.getElementById("colee_left1");
    var colee_left = document.getElementById("colee_left");
    colee_left2.innerHTML = colee_left1.innerHTML;

    function Marquee3() {
        if (colee_left2.offsetWidth - colee_left.scrollLeft <= 0) { //offsetWidth 是对象的可见宽度
            colee_left.scrollLeft -= colee_left1.offsetWidth //scrollWidth 是对象的实际内容的宽，不包边线宽度
        } else {
            colee_left.scrollLeft++;
        }

    }
    var MyMar3 = setInterval(Marquee3, speed);