Question

我有一个动态项目列表，它拥有像幻灯片一样的滚动条，当显示列表的最后一项时，我无法用箭头设置滚动限制。

知道如何在查看最后一项时停止滚动吗？示例： JSFIDDLE

    $('.nextArrow').click(function() {
        //Animate the images to next slide
        $('.thumbs li:eq(0)').animate({"margin-top": "-=80"}, 500);             
    });

    $('.prevArrow').click(function() {
        var marginTopValue = $('.thumbs li:eq(0)').css('margin-top');
        //Animate the image to previous slide
        if (marginTopValue == '0px') {

        } else {
            $('.thumbs li:eq(0)').animate({"margin-top": "+=80"}, 500);
        };
    });

Answer 1

更改

$('.nextArrow').click(function() {
    //Animate the images to next slide
    $('.thumbs li:eq(0)').animate({"margin-top": "-=80"}, 500);             
});

到

$('.nextArrow').click(function() {
        //Animate the images to next slide
  var marginTopValue = parseInt($('.thumbs li:eq(0)').css('margin-top').replace('px', ''));
  if (marginTopValue >= (0-$('.thumbs')[0].scrollHeight))
  {
        $('.thumbs li:eq(0)').animate({"margin-top": "-=80"}, 500);
  }
    });

JSFIDDLE在这里！

Answer 2

这不是我做上一个/下一个滑块的方法，而是作为您问题的解决方案（不完全替换它），您应该测量UL的高度并防止上边距偏移超过它。

E.G：https://jsfiddle.net/ssx7pL3v/6/

$('.thumbs').before('<span class="nextArrow arrowThumbs" id="nextArrow">Next</span>').after('<span class="prevArrow arrowThumbs" id="prevArrow">Prev</span>');

var ih = $('.thumbs li:first').height();

$('.nextArrow').click(function() {
  var maxTopMargin = 0 - ($('.thumbs').height() + ih);
  var marginTopValue = parseInt($('.thumbs li:eq(0)').css('margin-top'));
  //Animate the image to next slide
  if (marginTopValue > maxTopMargin) {
    $('.thumbs li:eq(0)').animate({
      "margin-top": "-=" + ih
    }, 500);
  }
});

$('.prevArrow').click(function() {
  var marginTopValue = parseInt($('.thumbs li:eq(0)').css('margin-top'));
  //Animate the image to previous slide
  if (marginTopValue < 0) {
    $('.thumbs li:eq(0)').animate({
      "margin-top": "+=" + ih
    }, 500);
  };
});

.thumbs {
  display: block;
  width: 128px;
  height: 120px;
  overflow: hidden;
  padding: 0;
}
.thumbs li {
  width: 128px;
  display: block;
  margin: 0 auto;
  text-align: center;
  list-style: none;
}
.thumbs li h2 {
  font-size: 11px;
  margin: 0;
  padding: 0;
}
.thumbs li img {
  width: 30%;
}
.arrowThumbs {
  display: block;
  border: 1px solid #000;
  padding: 10px;
  width: 128px;
  text-align: center;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="thumbs">
  <li>
    <h2>Item 1</h2>
    <img src="http://icons.iconarchive.com/icons/rafiqul-hassan/blogger/128/Refresh-icon.png" alt="">
  </li>
  <li>
    <h2>Item 2</h2>
    <img src="http://icons.iconarchive.com/icons/rafiqul-hassan/blogger/128/Refresh-icon.png" alt="">
  </li>
  <li>
    <h2>Item 3</h2>
    <img src="http://icons.iconarchive.com/icons/rafiqul-hassan/blogger/128/Refresh-icon.png" alt="">
  </li>
  <li>
    <h2>Item 4</h2>
    <img src="http://icons.iconarchive.com/icons/rafiqul-hassan/blogger/128/Refresh-icon.png" alt="">
  </li>
  <li>
    <h2>Item 5</h2>
    <img src="http://icons.iconarchive.com/icons/rafiqul-hassan/blogger/128/Refresh-icon.png" alt="">
  </li>
  <li>
    <h2>Item 6</h2>
    <img src="http://icons.iconarchive.com/icons/rafiqul-hassan/blogger/128/Refresh-icon.png" alt="">
  </li>
</ul>

Answer 3

在jsfiddle中尝试使用此javascript代码

        $('.thumbs').before('<span class="nextArrow arrowThumbs" id="nextArrow">Next</span>').after('<span class="prevArrow arrowThumbs" id="prevArrow">Prev</span>');
    $('.nextArrow').click(function() {
        //Animate the images to next slide
  console.log($('.thumbs').height(), $('.thumbs li:eq(0)').css('margin-top').replace("px", ""));
  if(Math.abs($('.thumbs li:eq(0)').css('margin-top').replace('px','')) <= $('.thumbs').height() + 60)
        $('.thumbs li:eq(0)').animate({"margin-top": "-=80"}, 500);             
    });

    $('.prevArrow').click(function() {
        var marginTopValue = $('.thumbs li:eq(0)').css('margin-top');
        //Animate the image to previous slide
        if (marginTopValue == '0px') {

        } else {
            $('.thumbs li:eq(0)').animate({"margin-top": "+=80"}, 500);
        };
    });

这是超级天真的，因为它只是用你滚动的边距来控制元素的高度，但是可以使用简单的调整

使用jQuery查看最后一项时停止滚动

3 个答案: