js 슬라이드 오류 이유를 못찾겠어영

<script>

    var img=document.getElementById("slide");
    var imageArrey=["img/slid.png","img/slid1.png","img/slid3.png","img/emslogo%20(1).png"];
    var imageIndex=0;
    
    function changeImage(){
img.setAttribute("src",imageArrey[imageIndex]);
        imageIndex++;
    if(imageIndex>=imageArrey.length){
            imageIndex=0;
                
        }
        
    }
    setInterval(changeImage,1000);

    </script>

---------------------------------------------------

html

    <div class="main">
            <ul>
        <li><img src="img/slid.png" alt="#" width="650" id="slide"></li>
        <li><img src="img/slid1.png" alt="" width="650"></li>
        <li><img src="img/slid3.png" alt="#" width="650"  ></li>
        <li><img src="img/emslogo%20(1).png" alt="#" width="650"></li>
    
       </ul>

요렇게 코드를 짯는데 슬라이드가 실행이 안되고 : Cannot read property 'setAttribute' of null
    at changeImage라고 에러만 뜹니다.

오타도 찾아보고. 했는데 왜 값이 없다고 뜨는지 이해를 할 수 가 없네요 ㅠ 어쩌죠??

개발자 도구에서는 돌아가는 것은 확인이 됩니다~

슬라이더가 실행만 안되고 ㅠ