轮播图定时器清（clearTimeout(timer)不起作用

我写了一个轮播图，其中上一张和下一张都绑定了清除定时器，自动每点一次就清除掉上次使用定时器以防止他不规则的自动翻图片，但是没起到作用

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>Documenttitle>
    <style>
        .outer {
            width: 640px;
            margin: 50px auto;
            text-align: center;
        }
    style>

    <script>
        window.onload = function () {
            // 图片轮播

            const info = document.getElementById("info")

            const prev = document.getElementById("prev")

            const auto = document.getElementById("auto")

            const next = document.getElementById("next")

            const btnwrapper = prev.parentNode

            const imgwrapper = btnwrapper.previousElementSibling

            const imgchange = document.getElementById("imgchange")
            // alert(imgchange)

            const imgArr = ["./images/1.png", "./images/2.png", "./images/3.png", "./images/4.png", "./images/5.png"]

            let temp = 0

            info.textContent = `总共 ${imgArr.length} 张图片，当前 ${temp + 1} 张`

            let timer

            auto.addEventListener("click", function(){
                //关闭
                clearTimeout(timer)

                timer = setTimeout(function fn(){
                    temp++
                    if(temp > 4){
                        temp = 0
                    }
                    imgchange.src=imgArr[temp]
                    info.textContent = `总共 ${imgArr.length} 张图片，当前 ${temp + 1} 张`
                    setTimeout(fn,3000)
                },3000)
            })

            prev.addEventListener("click", function () {
                clearTimeout(timer)
                temp--
                if(temp < 0){
                    temp = 4
                }
                imgchange.src=imgArr[temp]
                info.textContent = `总共 ${imgArr.length} 张图片，当前 ${temp + 1} 张`
            })

            next.addEventListener("click", function () {
                clearTimeout(timer)
                temp++
                if(temp > 4){
                    temp = 0
                }
                imgchange.src=imgArr[temp]
                info.textContent = `总共 ${imgArr.length} 张图片，当前 ${temp + 1} 张`
            })
            // next.onclick = function(){
            //     imgchange.src=imgArr[temp++]
            // }

            

            
        }
    script>
head>

<body>
    <div class="outer">
        <p id="info">
            总共n张图片，当前m张
        p>
        <div class="img-wrapper">
            <img id="imgchange" src="./images/1.png" alt="这是一张图片">
        div>

        <div class="btn-wrapper">
            <button id="prev">上一张button>
            <button id="auto">自动button>
            <button id="next">下一张button>
        div>
    div>
body>

html>

希望各位能帮忙看一下！！十分感谢！

“Devil组”引证GPT后的撰写：
代码看起来是有问题的，因为你在绑定点击事件的时候没有传入一个函数作为事件处理程序，而是使用了一个非法的代码行“auto.addEventListener("click")”，这里的“auto”应该是一个保留关键字，不能用来当作变量名或者属性名。正确的代码应该是这样的：

auto.addEventListener("click", function() {
  // 关闭定时器
  clearInterval(timer);

  timer = setInterval(function() {
    temp++;
    if (temp > 4) {
      temp = 0;
    }
    imgchange.src = imgArr[temp];
    info.textContent = `总共 ${imgArr.length} 张图片，当前 ${temp + 1} 张`;
  }, 3000);
});

传递了一个匿名函数作为事件处理程序，这个函数会在点击“自动”按钮的时候执行。在这个函数中，首先关闭了定时器，然后重新设置一个新的定时器，并把它的返回值赋值给变量“timer”。这个新的定时器每隔3秒钟就会自动执行一次，更新图片的地址和图片信息的内容。

还有一个问题是，你在上一张和下一张按钮上也绑定了清除定时器的事件，但是你的代码中没有设置新的定时器，这样就无法自动播放了。如果你希望在点击上一张和下一张按钮的时候也能够自动播放图片，可以将定时器的代码放到一个函数中，然后在所有的事件处理程序中都调用这个函数，这样就能实现自动播放和手动切换的效果。

我改正了我的错误是在auto那段代码中递归的那个setTimeout没有给timer绑定