jQuery垂直滑块保持滑动

Question

我创建了一个垂直内容滑块，它会向上/向下滑动鼠标滚轮使用，但它不是按预期工作，它开始滚动，并保持滚动...

它应该在每个滚动中显示一张幻灯片。

编辑：在每个滚动条中，它应显示为Slider Heading 1 ，然后下一个滚动条将显示Slider Heading 2

这是JSfiddle演示

 $(document).ready(function($) { var slideCount = $('.portfolio-slider > ul > li').length; var slideWidth = $('.portfolio-slider > ul > li').width(); var slideHeight = $('.portfolio-slider > ul > li').height(); var sliderUlWidth = slideCount * slideHeight; $('.portfolio-slider').css({ width: slideWidth, height: slideHeight }); $('.portfolio-slider > ul').css({ width: sliderUlWidth, top: -slideHeight }); $('.portfolio-slider > ul > li:last-child').prependTo('.portfolio-slider > ul'); function changePortFolio() { $('.portfolio-slider > ul').animate({ top: +slideHeight }, 1000, function() { $('.portfolio-slider > ul > li:last-child').prependTo('.portfolio-slider > ul'); $('.portfolio-slider > ul').css('top', ''); }); }; $('.portfolio-slider').on('mousewheel', function(event) { changePortFolio(); console.log("a"); }); }); 

 .portfolio-slider { position: relative; overflow: hidden; margin: 20px auto 0 auto; border-radius: 4px; } .portfolio-slider>ul { position: relative; margin: 0; padding: 0; height: 200px; list-style: none; } .portfolio-slider>ul>li { position: relative; display: block; float: left; margin: 0; padding: 0; width: 500px; height: 300px; background: #ccc; text-align: center; line-height: 300px; } .slider_option { position: relative; margin: 10px auto; width: 160px; font-size: 18px; } .img-block { float: left; width: 30%; } .img-block>img { width: 100%; height: auto; } .content-block { float: right; width: 70%; padding: 0 20px; box-sizing: border-box; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="portfolio-slider"> <ul> <li> <div class="img-block"><img src="https://camo.mybb.com/e01de90be6012adc1b1701dba899491a9348ae79/687474703a2f2f7777772e6a71756572797363726970742e6e65742f696d616765732f53696d706c6573742d526573706f6e736976652d6a51756572792d496d6167652d4c69676874626f782d506c7567696e2d73696d706c652d6c69676874626f782e6a7067"></div> <div class="content-block"> <h1>Slider Heading 1</h1> <p>This is content related to slider. This is content related to slider. This is content related to slider. This is content related to slider. </p> </div> </li> <li style="background: #aaa;"> <div class="img-block"><img src="https://camo.mybb.com/e01de90be6012adc1b1701dba899491a9348ae79/687474703a2f2f7777772e6a71756572797363726970742e6e65742f696d616765732f53696d706c6573742d526573706f6e736976652d6a51756572792d496d6167652d4c69676874626f782d506c7567696e2d73696d706c652d6c69676874626f782e6a7067"></div> <div class="content-block"> <h1>Slider Heading 2</h1> <p>This is content related to slider. This is content related to slider. This is content related to slider. This is content related to slider. </p> </div> </li> </ul> </div> 

Answer 1

我认为您需要在动画前添加.stop（） 。 我不确定我理解你想要什么。

$('.portfolio-slider > ul').stop().animate({
  top: +slideHeight
}, 1000, function(){

但这是一个小提琴==> https://jsfiddle.net/tonysamperi/bdv4p0a7/

您也可以使用变量检查动画和回调是否完成

  $(document).ready(function($) {
    var animating = false;
    var slideCount = $('.portfolio-slider > ul > li').length;
    var slideWidth = $('.portfolio-slider > ul > li').width();
    var slideHeight = $('.portfolio-slider > ul > li').height();
    var sliderUlWidth = slideCount * slideHeight;

    $('.portfolio-slider').css({
      width: slideWidth,
      height: slideHeight
    });
    $('.portfolio-slider > ul').css({
       width: sliderUlWidth,
       top: -slideHeight
    });
    $('.portfolio-slider > ul > li:last-child').prependTo('.portfolio-slider > ul');

   function changePortFolio() {
         animating = true;
        $('.portfolio-slider > ul').animate({
            top: +slideHeight
        }, 1000, function() {
            $('.portfolio-slider > ul > li:last-child').prependTo('.portfolio-slider > ul');
            $('.portfolio-slider > ul').css('top', '');
            animating = false;
        });
  }

  $('.portfolio-slider').on('mousewheel', function(event) {
      if(animating) return false;
      changePortFolio();
      console.log("a");
  });
 });

第二个解决方案的提琴==> https://jsfiddle.net/tonysamperi/g75dtff2/

Answer 2

之所以要滚动滑块多次，是因为滚轮不均匀。 我正在研究硬件，但这只是观察。 鼠标滚动有多个停顿（我没有专门的术语），当您缓慢滚动鼠标时，您会注意到它。 如果缓慢滚动，您会发现有一点停顿。 因此，每次暂停都会触发鼠标滚动事件。 如果快速滚动，则滚动事件将被触发多次。 它只是基于我的观察。

因此，基本上，无论您经过多少次滚动暂停，您都希望每次滚动时都滚动图像。

这是一个解决方案，但首先滚动两次即可触发（无法找出原因）。 对于此行为，已经有关于stackoverflow的公开问题，但是对于我来说，它们似乎并不起作用。 但是对于后续的滚动，它可以完美地工作。

$(document).ready(function($) {

  var slideCount = $('.portfolio-slider > ul > li').length;
  var slideWidth = $('.portfolio-slider > ul > li').width();
  var slideHeight = $('.portfolio-slider > ul > li').height();
  var sliderUlWidth = slideCount * slideHeight;

  $('.portfolio-slider').css({
    width: slideWidth,
    height: slideHeight
  });
  $('.portfolio-slider > ul').css({
    width: sliderUlWidth,
    top: -slideHeight
  });
  $('.portfolio-slider > ul > li:last-child').prependTo('.portfolio-slider > ul');

  function changePortFolio() {
    $('.portfolio-slider > ul').animate({
      top: +slideHeight
    }, 1000, function() {
      $('.portfolio-slider > ul > li:last-child').prependTo('.portfolio-slider > ul');
      $('.portfolio-slider > ul').css('top', '');
    });
  };
  var scrolled = false;
  $('.portfolio-slider').on('wheel', function(event) {
    if (!scrolled) {
      scrolled = true;
      changePortFolio();
      setTimeout(function() {
        scrolled = false;
      }, 1000);
    }
  });
});

在这里提琴一样