我多次点击滑动按钮

Question

我是jquery的初学者，并尝试创建幻灯片 一切正常，直到我多次单击滑块按钮，一切都变得疯狂了。 您能帮我解决这个问题吗？ 当我运行代码时，后面或前面的一些图片没有任何规则，但是当它是自动的时，我没有问题 我认为它是关于我的关于上一个或下一个功能的，但是我不知道如何解决它 这是我的jQuery代码

  let show=2;
let constLeft=-400;
let constRight=1100;
let constShow=350;
let constRightToDont=1850;
let constDontShow=-1150;
let time;
let flag=false;
let left=(show-1);
let leftLeft=5;
let right=(show+1);
let rightRight=right+1;
$(document).ready(function()
{
    $(".d").mouseover(function()
    {
        $(this).css("font-size","21px");
    });
    $(".d").mouseout(function()
    {
        $(this).css("font-size","19px");
    });
    $(".col").mouseover(function()
    {
        $(this).css("width","350px");
        $(this).css("font-size","20px");
        $(this).find("p").css("display","block");
    });
    $(".col").mouseout(function()
    {
        $(this).css("width","300px");
        $(this).css("font-size","18px");
        $(this).find("p").css("display","none");
    })

})
function slide()
{

     left=(show-1);
     leftLeft=left-1;
    right=(show+1);

    if(show===1)
    {
        left=5;
        leftLeft=4;
    }
    if(left===1)
    {
        leftLeft=5;
    }
    if(show===5)
    {
        right=1;
    }
    console.log(left+" "+show+" "+right);
    $("#i"+leftLeft).css("left",-1150);
    $("#t"+show).fadeOut(1000,function(){
    $("#i"+leftLeft).animate({left:constLeft},2000);
    $("#i"+left).animate({left:constShow},2000);
    $("#i"+show).animate({left:constRight},2000);
    $("#i"+right).animate({left:constRightToDont},2000,function()
    {
        show=left;
        $("#t"+show).fadeIn(1000);
        $("#i"+right).css("left",constDontShow);
    });
    });

}
function back()
{
  // clearInterval(time);
     left=(show-1);
     right=(show+1);
     rightRight=right+1;
    if(show==1)
    {
        left=5;
    }
    if(show===5)
    {
        right=1;
        rightRight=2;
    }
    if(right===5)
    {
        rightRight=1;
    }
    $("#t"+show).fadeOut(1000,function(){
    $("#i"+rightRight).css("left",1850);
    $("#i"+rightRight).animate({left:1100},2000);
    $("#i"+left).animate({left:-1150},2000,function()
    {
        $("#i"+left).css("left",1850);
    });
    $("#i"+show).animate({left:-400},2000);
    $("#i"+right).animate({left:constShow},2000,function()
    {
        show=right;
        $("#t"+show).fadeIn(1000);
    });
    });  
   // time=setInterval(4000); 
}
function next()
{
    if(flag)
    {
    clearInterval(time);
    $("#p").removeClass("fas fa-pause-circle");
          $("#p").addClass("fas fa-play-circle");
    if($("#i"+show).queue().length>0)
    {
        $("#t"+show).stop(true,true);
    $("#i"+leftLeft).css("left",-1150);
    $("#i"+leftLeft).stop(true,true);
    $("#i"+left).stop(true,true);
    $("#i"+show).stop(true,true);
    $("#i"+right).stop(true,true);
    $("#i"+right).css("left",constDontShow);
    show=left;
    }

    flag=true;
    }
    else
    {
        slide();
    }
  //  setTimeout(slide,4000);
    // slide();
    //time=setInterval(slide,4000);
}
function back2()
{
    if(flag)
    {
    clearInterval(time);
    $("#p").removeClass("fas fa-pause-circle");
          $("#p").addClass("fas fa-play-circle");
    if($("#i"+show).queue().length>0)
    {
        $("#t"+show).stop(true,true);
    $("#i"+leftLeft).css("left",-1150);
    $("#i"+leftLeft).stop(true,true);
    $("#i"+left).stop(true,true);
    $("#i"+show).stop(true,true);
    $("#i"+right).stop(true,true);
    $("#i"+right).css("left",constDontShow);
    show=left;

    }
    flag=false;
    }
    else
    {
        back();
    }
}
function auto()
{
    if(flag)
      {
          clearInterval(time);
          if($("#i"+show).queue().length>0)
          {
            $("#t"+show).stop(true,true);
          $("#i"+leftLeft).css("left",-1150);
          $("#i"+leftLeft).stop(true,true);
          $("#i"+left).stop(true,true);
          $("#i"+show).stop(true,true);
          $("#i"+right).stop(true,true);
          $("#i"+right).css("left",constDontShow);
          show=left;
          }
          $("#p").removeClass("fas fa-pause-circle");
          $("#p").addClass("fas fa-play-circle");
          flag=false;
      }
    else
    {
        time=setInterval(slide,4000);
        $("#p").removeClass("fas fa-play-circle");
        $("#p").addClass("fas fa-pause-circle");
        flag=true;
    }
}

这是我的html

  <div class="slideShow" >
      <div class="text" id="t1"> car car car car car car car car car car car car car car car car car car car car car car car car car car car car car car car car car car car</div>
      <div class="text" id="t2" style="display: block">  hhhhhhhhhhhhh hhhhh h h h hh          hhhhhh hh h h h h h h hhhhh hhhh  hhh</div>
      <div class="text" id="t3"> ar car car car car car car car car car car car car car car car car car  hhhhhhhhhhhhh hhhhh h h h hh          hhhhhh hh h h h h h h hhhhh hhhh  hhh</div>
      <div class="text" id="t4"> r car car car car car car car car car car car car car car car</div>
      <div class="text" id="t5"> car car car car car car car car car car car car car car car car car car car car car car car car car car car car car car car car car car car</div>
      <img src="1.jpg" class="left imageSlide" id="i1">
      <img src="2.jpg" class="show imageSlide" id="i2">
      <img src="3.jpg" class="right imageSlide" id="i3">
      <img src="4.jpg" class="non imageSlide" id="i4">
      <img src="5.jpg" class="non imageSlide" id="i5">
  </div>
  <span id="dd" onclick="back2()" style="color: black;font-size: 30px;left: 620px;"><i class="fas fa-chevron-circle-left"></i></span>
  <span id="dd" onclick="auto()" style="color: black;font-size: 30px;left:670px;"><i id="p" class="fas fa-play-circle"></i></span>
  <span id="dd" onclick="next()" style="left:720px;color: black;font-size: 30px"><i class="fas fa-chevron-circle-right"></i></span>
 <script src="main2.js"></script>