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值添加到 last 的.offsetLeft值可见幻灯片元素和其宽度。然后，您将从这些计算的总和中减去父元素的宽度。

这样做，您实际上是计算最后一个幻灯片元素 relative 的位置到.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;
}

对于click事件侦听器，如果有更多可见幻灯片，则仅滑动元素，这由moreVisibleSlides函数返回的布尔值确定。此外，我还添加了一个检查（!$item.is(':animated')），以防止在当前正在进行动画时下一张幻灯片被设置动画。这样可以确保您无法在动画期间多次单击.next按钮，然后无论是否有更多可见幻灯片都过度滚动。

Updated Example

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

防止过度滚动

1 个答案: