Question

我的页面上有幻灯片。有五个项目。我有两个循环通过这些项目的箭头。当页面加载时我使用css隐藏左箭头，当幻灯片显示到达结尾时我想隐藏右箭头。我试图做一些技巧，比如检测父母＆＃34; margin-left：0＆＃34;从页面中删除左箭头但到目前为止我没有取得任何成功。我还没有能够移除右箭头。以下是我的代码。我知道有更简单的方法可以做到这一点，但我对这类问题缺乏经验。

<div id="tips-navbar">
    <ul class="slides">
      <li id="the-best-mashed-potatoes" class="selected">
        <div class="st-label">The Best Mashed Potatoes</div>
        <div class="underline"></div>
      </li>
      <li id="fully-loaded-mashed-potatoes">
        <div class="st-label">Fully Loaded Mashed Potatoes</div>
        <div class="underline"></div>
      </li>
      <li id="perfect-mashed-sweet-potatoes">
        <div class="st-label">Perfect Mashed Sweet Potatoes</div>
        <div class="underline"></div>
      </li>
      <li id="how-to-make-mash-tinis">
        <div class="st-label">How to Make Mash-tinis</div>
        <div class="underline"></div>
      </li>
      <li id="simple-smashed-potatoes">
        <div class="st-label">Simple Smashed Potatoes</div>
        <div class="underline"></div>
      </li>            
    </ul>
        <a class="st-brownBg st-left-m">
            <div class="st-arrowVideoBack"></div>
        </a>

        <a class="st-brownBg  st-right-m">
            <div class="st-arrowVideoNext"></div>
        </a>
  </div>

    $(function vNext(){
        $( ".st-right-m" ).click(function() {
            $( "#tips-navbar ul" ).animate({
                marginLeft: "-=431"
            }, 500);
            $( ".st-left-m" ).css('display','block');
            if($('.st-right-m'.click() >= 4)){
                $('.st-right-m').hide()
            }
        });
    });

    $(function vPrev(){
        $( ".st-left-m" ).click(function() {
            $( "#tips-navbar ul" ).animate({
                marginLeft: "+=431"
            }, 500);
            if($($this).parents('.slides').css('marginLeft' === 0 + 'px')){
                $(this).hide();
            }
        });

    });

沙箱：http://jsfiddle.net/eapo/oq46u3wf/1/

Answer 1

您可以使用JS代码执行以下操作：

$.current = 1;

$.updateArrows = function () {
    if ($.current <= 1) {
        if ($( ".st-left-m" ).is(':visible')) {
            $( ".st-left-m" ).hide();
        }
    } else {
        $( ".st-left-m" ).show();
    }
    if ($.current >= 5) {
        if ($( ".st-right-m" ).is(':visible')) {
            $( ".st-right-m" ).hide();
        }
    } else {
        $( ".st-right-m" ).show();
    }
};

$(function vNext(){
    $( ".st-right-m" ).click(function() {
        $( "#tips-navbar ul" ).animate({
            marginLeft: "-=431"
        }, 500);
        $.current++;
        $.updateArrows();
    });
});

$(function vPrev(){
    $( ".st-left-m" ).click(function() {
        $( "#tips-navbar ul" ).animate({
            marginLeft: "+=431"
        }, 500);
        $.current--;
        $.updateArrows();
    });
});

我们在这里做的是：

使用当前幻灯片保留var，每次点击都会更新。
每次点击我们都会更新箭头（带有额外功能）来检查当前幻灯片，如果是1，则会隐藏左箭头，如果是5则隐藏右箭头。

Answer 2

您可以使用jQuery查找“last-child”，在您的情况下是最后一个＆lt; li＆gt;然后采取行动。请参阅此参考：http://api.jquery.com/last-child-selector/

//为您的例子

$(".slides li").is(':last-child')

如何在列表结束或开始时从幻灯片中删除箭头

2 个答案: