javascript - 防止过度滚动

Question

经过学习、查看教程、获得一些帮助后，我几乎让这个脚本按预期工作。然而，我并没有停滞不前，在试图弄清楚其中的逻辑时我的大脑很痛。

问题是脚本允许向前过度滚动。我怎样才能阻止它？

jQuery:

var $item = $('.slider'),
    start = 0,
    view = $('#main-header').width(),
    end = $('.slider').width();

$('.next').click(function () {
    if (start < view) {
        start++;
        $item.animate({
            'left': '-=100%'
        });
    }
});

$('.prev').click(function () {
    if (start > 0) {
        start--;
        $item.animate({
            'left': '+=100%'
        });
    }
});

HTML:

<div id="main-header">
    <div class="slider">
        <div class="item-post" style="background: url(http://4.bp.blogspot.com/-LjJWOy7K-Q0/VOUJbMJr0_I/AAAAAAAAdAg/I2V70xea8YE/s320-c/enviroment-5.jpg) center"></div>
        <div class="item-post" style="background: url(http://1.bp.blogspot.com/-l3UnbspFvv0/VOUK8M-34UI/AAAAAAAAdA0/ooGyXrHdNcg/s320-c/enviroment-2.jpg)"></div>
        <div class="item-post" style="background: url(http://2.bp.blogspot.com/-cun1kQ42IBs/VOUaSPfnebI/AAAAAAAAdBQ/yTEj9K-BGdk/s320-c/fashion-3.jpg)"></div>
    </div>
    <div class="prev"></div>
    <div class="next"></div>
</div>

CSS:

#main-header {
    overflow: hidden;
    position: relative;
}
.slider {
    width: 100%;
    height: 200px;
    position: relative;
}
.item-post {
    width: 100%;
    height: 200px;
    background: rgba(0, 0, 0, 0.1);
    background-size: cover !important;
    background-position: center !important;
    position: absolute;
    top: 0;
}
.item-post:first-of-type {
    left: 0;
}
.item-post:nth-of-type(2) {
    left: 100%;
}
.item-post:last-of-type {
    left: 200%;
}
.prev, .next {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 25px;
    background: rgba(0, 0, 0, 0.2);
    cursor: pointer;
}
.prev {
    left: 0;
}
.next {
    right: 0;
}

jsfiddle:http://jsfiddle.net/51maaks8/8/

Answer 1

为了确定是否有另一张幻灯片可见，您可以创建一个函数，将父元素的 .offsetLeft 值添加到父元素的 .offsetLeft 值中。 最后可见幻灯片元素及其宽度。然后，您可以从这些计算的总和中减去父元素的宽度。

这样做时，您实际上是在计算最后一个幻灯片元素相对于 .item-wrapper 父元素左侧位置的位置。

function moreVisibleSlides() {
    var $last = $('#slider > .item-wrapper > .item-post:last:visible'),
        positionRelativeToParent = $last.parent()[0].offsetLeft + $last[0].offsetLeft + $last.width() - $item.width();

    return positionRelativeToParent > 5;
}

对于点击事件监听器，只有在有更多可见幻灯片时才滑动元素，这是由 moreVisibleSlides 函数返回的 bool 值决定的。此外，我还添加了一个检查 (!$item.is(':animated'))，以防止当前正在进行动画时下一张幻灯片被动画化。这可确保您无法在动画期间多次单击 .next 按钮，然后滚动，无论是否有更多可见幻灯片。

Updated Example

$('.next').click(function () {
    if (moreVisibleSlides() && !$item.is(':animated')) {
        start++;
        $item.animate({
            'left': '-=100%'
        });
    }
});