如何将箭头切换为灰色以增强轮播 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 的左侧按钮中添加了 disabled 属性，因为在加载时您将始终向左滚动，这样您就不需要运行检查负载。

如何将箭头切换为灰色以增强轮播 UI 体验？

How can I toggle grey-out the arrows to enhance my carousel UI experience?

css

jquery

carousel