Question

  //NEXT
  $('.social-next a').on('click', function(e){
    e.preventDefault();
    $('.social').animate({'margin-left': '-=940'}, 500);
  });


  //PREVIOUS
  $('.social-previous a').on('click', function(e){
    e.preventDefault();
     $('.social').animate({'margin-left': '+=940'}, 500);
  });

使用这段代码你可以永远地滑动，从所有内容到任何地方，我无法让按钮消失，我开始得到奇怪的错误。我尝试使用第一个和最后一个juts隐藏按钮，但我不知道我哪里出错了，我开始尝试其他方法，我甚至提到我太尴尬了...我知道它只是一个简单的1-2线程虽然...

HTML：

    <div class="social">
        <div class="slide">
        <div class="intro">xxx.</div><!-- <a href="#" class="show-slides">view more..</a> -->
        </div>

        <div class="slide">
            <div class="intro">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima error.<a href="#" class="open-slides"></div>
            <div class="content">dolor dolor dolor </div><a href="#" class="close-slides"></a>
        </div>

        <div class="slide">
            <div class="intro">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima error.</div><a href="#" class="open-slides">
            <div class="content">ipsum ipsum ipsum ipsum ipsum</div><a href="#" class="close-slides"></a>
        </div>

        <div class="slide">
            <div class="intro">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima error.<a href="#" class="open-slides"></div>
            <div class="content"><div class="tekst">Lorem Lorem Lorem Lorem Lorem</div></div><a href="#" class="close-slides"></a>
        </div>

    </div>

Answer 1

该代码中没有任何内容可以为我们提供第一个或最后一个位置，唯一应用的是额外的保证金，因此检查位置的唯一方法是从保证金开始。

例如在第一张幻灯片上说左边距为0，你可以检查并隐藏上一个按钮，在最后一张幻灯片上边距为2820px，这样你就可以检查并隐藏下一个按钮

这是一种令人讨厌的方式，但是如果不改变标记，那么使用此代码就可以获得所有这些。

编辑 - 我已经改变了代码以使用animate的回调函数，以及过滤器不允许动画在它已经运行时启动，这似乎工作得非常好并且完全按照你想要的去做：我已更新了demo，请尝试一下

var increment = -94;
$('.social-next a').on('click', function(e) {
    e.preventDefault();
    $('.social').filter(':not(:animated)').animate({
        'margin-left': '+=' + increment
    }, 500, function() {
        checkButtons($('.social').css("margin-left"))
    });
});

$('.social-previous a').on('click', function(e) {
    e.preventDefault();
    intMar = +$('.social').css("margin-left").replace("px", "");
    $('.social').filter(':not(:animated)').animate({
        'margin-left': '-=' + increment
    }, 500, function() {
        checkButtons($('.social').css("margin-left"))
    });
});

function checkButtons(margin) {
    intMar = +margin.replace("px", "");
    var children = $('.social').children('.slide').length;
    var limit = increment * (children - 1);
    switch (intMar) {
    case 0:
        $('.social-previous').hide();
        break;
    case limit:
        $('.social-next').hide();
        break;
    default:
        $('.social-previous').show();
        $('.social-next').show();
        break;
    }
}

如何在第一张和最后一张幻灯片上丢失下一个和上一个按钮

1 个答案: