用js轮播图片动不了

问题遇到的现象和发生背景

用js轮播图片动不了

问题相关代码，请勿粘贴截图


.xuzhiimg{
    margin-top: 44px;
}
.imgage{
    width: 1145px;
    height: 500px;
    border: 2px solid #999;
    overflow: hidden;
}
.imglist{
    width: 4580px; 
    height: 500px;
    margin: 0 ;
    padding: 0 ;
    text-decoration:none;
    list-style:none;
}
.imglist img{
    width: 1145px;
    height: 500px;
}
.imglist li{
    float: left;
}

 <div style="width:1536px; height:700px; background-color: rgb(223, 223, 223); " class="imglunbo" >
        <div class="xuzhicenter">
            <h1>用户使用须知h1>
            <h3>在创作之前需要您有Web编程基础h3>
        div>
        <div class="xuzhiimg">
        <div class="imgage">
            <ul class="imglist">
                <li><img src="D:\Web3.0开发\images\home\pic1.JPG" alt="">li>
                <li><img src="D:\Web3.0开发\images\home\pic2.JPG" alt="">li>
                <li><img src="D:\Web3.0开发\images\home\pic3.JPG" alt="">li>
                <li><img src="D:\Web3.0开发\images\home\pic1.JPG" alt="">li>
            ul>
        div>
        div>
    div>
    <script> 
        var left = 0;
        var timer;
        run()
        function run(){
            if(left <= -3200){
               left = 0;
            }
            imglist.style.marginLeft = left + 'px';
            var n = (left % 1145 == 0 ) ? n = 1200 : n = 10;
            left -= 10;
            timer = setTimeout(run, n);
        }  
    script>

你都没获取 imglist的dom 需要获取一下。不然有报错


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .xuzhiimg {
            margin-top: 44px;
        }

        .imgage {
            width: 1145px;
            height: 500px;
            border: 2px solid #999;
            overflow: hidden;
        }

        .imglist {
            width: 4580px;
            height: 500px;
            margin: 0;
            padding: 0;
            text-decoration: none;
            list-style: none;
        }

        .imglist img {
            width: 1145px;
            height: 500px;
        }

        .imglist li {
            float: left;
        }
    </style>
</head>

<body>



    <div style="width:1536px; height:700px; background-color: rgb(223, 223, 223); " class="imglunbo">
        <div class="xuzhicenter">
            <h1>用户使用须知</h1>
            <h3>在创作之前需要您有Web编程基础</h3>
        </div>
        <div class="xuzhiimg">
            <div class="imgage">
                <ul class="imglist">
                    <li><img src="D:\Web3.0开发\images\home\pic1.JPG" alt=""></li>
                    <li><img src="D:\Web3.0开发\images\home\pic2.JPG" alt=""></li>
                    <li><img src="D:\Web3.0开发\images\home\pic3.JPG" alt=""></li>
                    <li><img src="D:\Web3.0开发\images\home\pic1.JPG" alt=""></li>
                </ul>
            </div>
        </div>
    </div>
    <script>
        var left = 0;
        var timer;
        run()
        function run() {
            if (left <= -3200) {
                left = 0;
            }
            let imglist=document.getElementsByClassName("imglist")[0];
            imglist.style.marginLeft = left + 'px';
            var n = (left % 1145 == 0) ? n = 1200 : n = 10;
            left -= 10;
            timer = setTimeout(run, n);
        }  
    </script>

</body>

</html>

你这代码控制台没报错吗，压根都找不到 imglist 是啥