jquery - 如何将箭头切换为灰色以增强我的旋转木马 UI 体验？

Question

我有一堆盒子可以像这样在旋转木马中滑动:

这是我的 div 的结构:

<ul>
    <li class="mp-resource"><div class="tl-box">1</div></li>
    <li class="mp-resource"><div class="tl-box">2</div></li>
    <li class="mp-resource"><div class="tl-box">3</div></li>
    <li class="mp-resource"><div class="tl-box">4</div></li>
    <li class="mp-resource"><div class="tl-box">5</div></li>
    <li class="mp-resource"><div class="tl-box">6</div></li>
</ul>

当我的页面加载时，我无法向左滚动，所以我想将向左的箭头设为灰色。我不想让我的用户感到困惑。

除此之外，当我无法再向右滚动时，我想使向右的箭头变灰。

实现类似目标的最有效方法是什么？

如何检查我是否在轮播的末尾？

这是我的实时结果:Fiddle

Answer 1

您应该在每次滚动动画后检测您是在左侧还是右侧，然后相应地更改箭头按钮的状态。检查将通过检查滚动位置来完成，可能看起来像这样:

    function isLeft() { 
         return $scrollView.scrollLeft() == 0;   
    }
    function isRight() {
         return $overflow.width() - $carousel.width() - $scrollView.scrollLeft() <= 0;    
    }

isLeft() 函数只是检查我们是否完全向左滚动，或者 scrollLeft 是否为 0。这应该很容易。

isRight() 基本上表示 [整个可滚动区域的宽度] - [可滚动区域可见部分的宽度] - [可滚动区域向左滚动的量]。如果它等于 0，我们可以说我们完全滚动到最后。这里就不多解释了，都是基础数学。

对于按钮状态，我会使用 jQuery attr与我刚刚向您展示的 2 个辅助函数一起运行，以便在需要时向您的按钮添加 disabled 属性，或者在不再需要时将其删除。像这样:

 $leftArrow.attr('disabled', isLeft());
 $rightArrow.attr('disabled', isRight());

对于css部分，可以使用属性选择器[disabled]。像这样:

.mp-arrows[disabled] {
    cursor: not-allowed;
    color: #ccc;
    border-color: #ccc;
}

更新后的 fiddle :https://jsfiddle.net/e9L60rfr/16/

请注意，我还在您的 HTML 中向左按钮添加了禁用属性，因为在加载时您将始终向左滚动，这样您就不需要在加载时运行检查。