0 
  //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);
  });

使用此代码，您可以永远滑动，从所有内容中滑到任何地方，我无法让按钮消失，我开始遇到奇怪的错误。我尝试使用 first 和 last 来突出隐藏按钮，但我不确定我哪里出错了，我开始尝试替代方法，我什至不好意思提及......我知道这只是一个简单的 1-2-liner 虽然...

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>
4

1 回答 1

0

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

例如，在第一张幻灯片上，margin-left 将为 0，您可以检查并隐藏上一个按钮，在最后一张幻灯片上，margin 将为 2820 像素，因此您可以检查并隐藏下一个按钮。

这是一种令人讨厌的做法，但在不更改标记的情况下，您可以通过此代码获得所有可用的信息。

编辑 - 我已经更改了代码以使用动画的回调函数，以及一个过滤器以不允许动画在它已经运行时开始，这似乎工作得很好并且完全符合你的要求：我'已经更新了演示，所以试一试

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;
    }
}​
于 2012-11-08T09:22:31.823 回答