jQuery垂直滑块保持滑动

Question

我已经创建了一个垂直内容滑块，它将使用鼠标轮上下滑动，但它不像预期的那样工作，它开始滚动并继续滚动。

它应该在每个卷轴中显示一个幻灯片。

编辑：在每个滚动中，它应该像滑翔机标题1那样显示，然后下一个滚动将显示滑翔机标题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

其原因是滚动滑块多次，是由于滚动轮不均匀。我正在钻研硬件，但这些只是观察。鼠标滚动有多个停顿(我没有这个东西的技术词汇)，当你慢慢滚动鼠标时，你会注意到它。如果你慢慢滚动，你会发现有一个轻微的停顿。因此，每次暂停时，都会触发鼠标滚动事件。如果快速滚动，滚动事件将被多次触发。只是基于我的观察结果。

因此，基本上，您想要滚动的图像，每次你滚动，无论多少滚动暂停你已经跨越。

这里有一个解决方案，但对于第一次滚动它的触发两次(无法找出原因)。对于这种行为，堆叠溢出已经有了一个悬而未决的问题，但它们似乎并不适用于我。但是对于后续的卷轴来说，它工作得很完美。

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

为同一个这里做小提琴