Question

我有一个简单的自动jQuery滑块，每隔几秒就会更改一次图片，我添加了一些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')
    }

问题在于，首先幻灯片工作正常，直到我悬停一个元素并且动画开始循环几次，是否有一个简单的修复，不需要我重写它？

Answer 1

我减少了测试图像的数量，您可以根据需要添加更多图像。

我修改了你的html，为div添加了一些自定义属性data-pic。看看http://jsfiddle.net/jth30720/1/

<div class="slider">
  <div class="slide">
  <div id="options">
    <div class="option" data-pic="pic-1">1</div>
    <div class="option" data-pic="pic-2">2</div>
    <div class="option" data-pic="pic-3">3</div>
</div>
<div class="slider">
  <div class="pic" id="pic-1">
    <img src="http://www.panic.com/blog/wp-content/themes/panic/images/icon_smile2.png">
  </div>
  <div class="pic" id="pic-2">
    <img src="http://www.panic.com/blog/wp-content/themes/panic/images/icon_sad2.png">
  </div>
  <div class="pic" id="pic-3">
    <img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/square-facebook-20.png">
  </div>
</div>

对于剧本，我几乎修改了所有内容。然后，您可以根据需要调整淡入淡出动画的时间。

$(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;
});
}

我希望你想要实现的目标

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

1 个答案: