что-то не так, когда я несколько раз нажмите кнопку слайдера - PullRequest
Новая
       44

что-то не так, когда я несколько раз нажмите кнопку слайдера

0 голосов
/ 04 апреля 2019

Я новичок в 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>
...