jQuery在最后一个元素处停止滚动

Question

我正在尝试在画廊的缩略图之间创建滚动功能。到目前为止，缩略图正在滚动，但有一个小问题。如果滚动到达最后一个缩略图，它会继续向右滚动（如果您向右滚动），左侧部分也会发生同样的情况。

第二个问题是，如果只有一个缩略图只有一个li，它仍然滚动。

jQuery：

var min = left = $('.thumbs ul').offset().left;
var max = $('.thumbs li').length * 160 + min;

$('.right').click(function () {
    var width = $('.thumbs').width();
    if (left > width - max) {
        left -= width;
        if (left < width - max) left = width - max;
        $('.thumbs ul').stop().animate({ 'left': left }, 1000);
    }
});

$('.left').click(function () {
    var width = $('.thumbs').width();
    if (left < min) {
        left += width;
        if (left > min) left = min;
        $('.thumbs ul').stop().animate({ 'left': left }, 1000);
    }
});

HTML：

 <a class="arrow left">&larr;</a>

<div class="thumbs">
    <ul>
        <li><a href="#"><img src="http://placehold.it/100x100" /></a></li>
        <li><a href="#"><img src="http://placehold.it/100x100" /></a></li>
        <li><a href="#"><img src="http://placehold.it/100x100" /></a></li>
        <li><a href="#"><img src="http://placehold.it/100x100" /></a></li>
        <li><a href="#"><img src="http://placehold.it/100x100" /></a></li>
        <li><a href="#"><img src="http://placehold.it/100x100" /></a></li>
        <li><a href="#"><img src="http://placehold.it/100x100" /></a></li>
        <li><a href="#"><img src="http://placehold.it/100x100" /></a></li>
    </ul>
</div> <a class="arrow right">&rarr;</a>

这是JSFiddle

解决方案：

从两侧（左侧和右侧）滚动到最后一个缩略图时应停止。如果没有足够的缩略图滚动，那么它应该保持静止。

请帮忙，谢谢:)

Answer 1

计算移动的边界，并确保它不会滚动到边界之外。当它滚动到负位置时，最小值为-(sum of images - width of thumbs)，最大值为0。

var left = 0;

function scroll(dx) {
    var width = $('.thumbs').width() - 40;
    var min = width - $('.thumbs li').length * 110;
    var l = Math.min(0, Math.max(min, left + width * dx));
    if (l != left) {
        left = l;
        $('.thumbs ul').stop().animate({ 'left': left }, 1000);
    }
}

$('.right').click(function () {
    scroll(-1.0);
});

$('.left').click(function () {
    scroll(1.0);
});

演示：http://jsfiddle.net/Guffa/k9fxb1hp/3/

现在它以可见拇指的整个宽度的步长滚动。如果您希望它滚动 80% 的宽度，您可以将 1.0 更改为例如 0.8。

Answer 2

您可以使用:last-child 选择器测量列表中最后一个li 的位置，并调整最大值以反映li 的宽度。

var min = $('.thumbs li').position().left;
var left = $('.thumbs ul:last-child').position().left;
var max = $('.thumbs li').length * 110 - min;

$('.right').click(function () {
    var width = $('.thumbs').width();
    if (left > (width - max)) {
        left -= width;
        if (left < width - max) left = width - max;
        $('.thumbs ul').stop().animate({ 'left': left }, 1000);
    }
});

$('.left').click(function () {
    var width = $('.thumbs').width();
    if (left < min) {
        left += width;
        if (left > min) left = min;
        $('.thumbs ul').stop().animate({ 'left': left }, 1000);
    }
});

见JSFiddle。

Answer 3

你考虑过无限循环的滚动吗？

$('.arrow-next').click(function() {
    $(".slider").animate({left: "-=25px"}, 600, function(){
        var left = $(this).css('left');
        $(this).css('left', left == "0px" ? "175px" : left);
    });   
});

$('.arrow-prev').click(function() {
    $(".slider").animate({left: "+=25px"}, 600, function(){
        var left = $(this).css('left');
        $(this).css('left', left == "200px" ? "25px" : left);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width: 150px">
    <button type="button" class="arrow-prev">></button>
    <br>
        <div style="display: inline-block; width: inherit; overflow: hidden;">
    <div id="before" style="position: absolute; left: 0px; height: 25px; width: 50px; background-color:white; z-index: 5; vertical-align:middle;"></div>
    <div style="position: absolute; left: 25px; height: 25px; width: 25px; background-color:red; vertical-align:middle;" class="slider"></div>
    <div style="position: absolute; left: 50px; height: 25px; width: 25px; background-color:purple; vertical-align:middle;" class="slider"></div>
    <div style="position: absolute; left: 75px; height: 25px; width: 25px; background-color:blue; vertical-align:middle;" class="slider"></div>
    <div style="position: absolute; left: 100px; height: 25px; width: 25px; background-color:green; vertical-align:middle;" class="slider"></div>
    <div style="position: absolute; left: 125px; height: 25px; width: 25px; background-color:greenyellow; vertical-align:middle;" class="slider"></div>
    <div style="position: absolute; left: 150px; height: 25px; width: 25px; background-color:yellow; vertical-align:middle;" class="slider"></div>
    <div style="position: absolute; left: 175px; height: 25px; width: 25px; background-color:orange; vertical-align:middle;" class="slider"></div>
    <div id="after" style="position: absolute; left: 175px; height: 25px; width: 50px; background-color:white; z-index: 5; vertical-align:middle;"></div>
        </div>
    <br>
    <br>
    <br>    <button type="button" class="arrow-next" style="display:inline-block">
        <</button>
</div>