Javascript 当控件悬停时，jQuery滑块卡在循环中

我有一个简单的自动jQuery滑块，每隔几秒钟就会改变图片，我还添加了一些div，当鼠标悬停时，这些div会跳到某个幻灯片上

这是我的密码

<div class="slider">
  <div class="slide">
    <div id="options">
      <div class="option" onmouseover="show1();">
      </div>
      <div class="option" onmouseover="show2();">
      </div>
      <div class="option" onmouseover="show3();">
      </div>
      <div class="option" onmouseover="show4();">
      </div>
      <div class="option" onmouseover="show5();">
      </div>
    </div>
    <div class="slider">
      <div class="pic" id="pic-1">
        <img src="img/1">
      </div>
      <div class="pic" id="pic-2">
        <img src="img/2">
      </div>
      <div class="pic" id="pic-3">
        <img src="img/3">
      </div>
      <div class="pic" id="pic-4">
        <img src="img/4">
      </div>
      <div class="pic" id="pic-5">
        <img src="img/5">
      </div>
    </div>
  </div>
</div>

    $(document).ready(function(){
    $('.pic').hide();
    i=1;
    function slider(){

    $('#pic-'+i).fadeIn('0').delay(1000).fadeOut('0',function(){
    i=i+1;if(i==6){i=1;}slider();

    });

    }
    slider();
    });
    function show1(){
        $('#pic-1').fadeIn('0').delay(1000).fadeOut('0')
    }
    function show2(){
        $('#pic-2').fadeIn('0').delay(1000).fadeOut('0')
    }
    function show3(){
        $('#pic-3').fadeIn('0').delay(1000).fadeOut('0')
    }
    function show4(){
        $('#pic-4').fadeIn('0').delay(1000).fadeOut('0')
        }
    function show5(){
        $('#pic-5').fadeIn('0').delay(1000).fadeOut('0')
    }

$（文档）.ready（函数（）{
$（'.pic'）.hide（）；
i=1；
函数滑块（）{
$（'#pic-'+i）.fadeIn（'0'）.delay（1000）.fadeOut（'0'，function（）{
i=i+1；如果（i==6）{i=1；}滑块（）；
});
}
滑块（）；
});
函数show1（）{
$（'pic-1'）.fadeIn（'0'）.delay（1000）.fadeOut（'0'））
}
函数show2（）{
$（'pic-2'）.fadeIn（'0'）.delay（1000）.fadeOut（'0'））
}
函数show3（）{
$（'pic-3'）.fadeIn（'0'）.delay（1000）.fadeOut（'0'））
}
函数show4（）{
$（'pic-4'）.fadeIn（'0'）.delay（1000）.fadeOut（'0'））
}
函数show5（）{
$（'pic-5'）.fadeIn（'0'）.delay（1000）.fadeOut（'0'））
}

---

问题是，首先幻灯片效果很好，直到我悬停一个元素，动画开始循环几次，有没有一个简单的修复方法不需要我重新编写它

我已经减少了用于测试的图像数量，您可以添加任意数量的图像

$(document).ready(function() {
  $('.pic').hide();
  i=1;
  interv = setInterval(slider, 2000);
});
$(".option").hover(
  function() {
    clearInterval(interv);
    $('#'+$(this).attr("data-pic")).fadeIn('0');
  }, function() {
  $('#'+$(this).attr("data-pic")).fadeIn('0').fadeOut('10000',function(){
      interv = setInterval(slider, 2000);
  });
}
);
function slider(){
  $('#pic-'+i).fadeIn('0').fadeOut('10000',function(){
    i=i+1;
    if(i==4) i=1;
});
}

我修改了你的html，在divs中添加了一些自定义属性数据pic。看一看

我希望这就是你想要实现的

$(document).ready(function() {
  $('.pic').hide();
  i=1;
  interv = setInterval(slider, 2000);
});
$(".option").hover(
  function() {
    clearInterval(interv);
    $('#'+$(this).attr("data-pic")).fadeIn('0');
  }, function() {
  $('#'+$(this).attr("data-pic")).fadeIn('0').fadeOut('10000',function(){
      interv = setInterval(slider, 2000);
  });
}
);
function slider(){
  $('#pic-'+i).fadeIn('0').fadeOut('10000',function(){
    i=i+1;
    if(i==4) i=1;
});
}