Question

我创建了一个垂直内容滑块，它将使用鼠标滚轮向上/向下滑动，但它不能正常工作，它开始滚动并保持滚动...

每个卷轴都应显示一张幻灯片。

编辑：在每个滚动条中，它应显示为滑块标题1 ，然后下一个滚动条将显示滑块标题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', '');
    });
  };
  $('.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(){

但这里有一个小提琴==＆gt; 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");
  });
 });

第二种解决方案的小提琴==＆gt; https://jsfiddle.net/tonysamperi/g75dtff2/

Answer 2

它多次滚动滑块的原因是由于滚轮不均匀。我正在钻研硬件，但这些只是观察。鼠标滚动有多个暂停（我没有这个东西的技术词），当你慢慢地滚动鼠标时你会注意到它。如果你慢慢滚动，你会发现有一点暂停。因此，对于每次暂停，都会触发鼠标滚动事件。如果快速滚动，则会多次触发scroll事件。它只是基于我的观察。

所以基本上你想要在每次滚动时滚动图像，无论你有多少滚动暂停。

这是一个解决方案，但首先滚动它的两次射击（无法弄清楚原因）。对于这种行为，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);
    }
  });
});

相同的here

小提琴

jQuery垂直滑块保持滑动

2 个答案: