screenshots.gif

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        .scroll{
            position:relative;
            width:830px;
            height:130px;
            border:10px solid #000;
            margin:100px auto;
            overflow:hidden;
        }
        .scroll ul{
            position:absolute;
            top:0;
            left:0;
            width:5000px;
            height:130px;

        }
        .scroll ul li{
            float:left;
            width:200px;
            height:130px;
            margin-right:10px;
            overflow:hidden;
        }
        img {
    height: 200px;
}

    </style>
</head>
<body>
    <div class="scroll" id="scroll">
        <ul id="munit">
            <li><img src="https://xn--xu0a.cn/api/dn?1" alt="" /></li>

            <li><img src="https://xn--xu0a.cn/api/dn?2" alt="" /></li>

            <li><img src="https://xn--xu0a.cn/api/dn?3" alt="" /></li>

            <li><img src="https://xn--xu0a.cn/api/dn?4" alt="" /></li>

            <li><img src="https://xn--xu0a.cn/api/dn?5" alt="" /></li>

            <li><img src="https://xn--xu0a.cn/api/dn?6" alt="" /></li>

            <li><img src="https://xn--xu0a.cn/api/dn?7" alt="" /></li>

            <li><img src="https://xn--xu0a.cn/api/dn?8" alt="" /></li>

            <li><img src="https://xn--xu0a.cn/api/dn?9" alt="" /></li>

            <li><img src="https://xn--xu0a.cn/api/dn?10" alt="" /></li>

            <li><img src="https://xn--xu0a.cn/api/dn?11" alt="" /></li>
        </ul>
    </div>



<script>
    
//获取元素ID
function my$(id){return document.getElementById(id)};

//获取元素
var scroll = my$("scroll");
var munit = my$("munit");
var back = -munit.offsetWidth;

munit.innerHTML = munit.innerHTML + munit.innerHTML;










//自己进行滚动播放
var nowLeft = 0;
//关键点：找到ul元素的运动折返点
var timer;
timer = setInterval(run,5);







//鼠标移上 scroll 元素，让运动停止

scroll.onmouseover = function(){
    clearInterval(timer);
};





//鼠标离开 scroll 元素，让运动重新开始

scroll.onmouseout = function(){
    clearInterval(timer);
timer = setInterval(run,5);
};



//运动函数
function run(){



//nowLeft 进行自减
nowLeft -= 1;
//每次都要判断，是否走到了折返点，如果走到了，让他瞬间切换到0
if(nowLeft <= back){
    nowLeft = 0;
}

//给ul赋值
munit.style.left = nowLeft + "px";

};






</script>


</body>
</html>