Question

我用'li'标签和jquery制作了幻灯片。

整个'ul'分别向Next或Prev按钮向左或向右移动，其宽度等于放在一起的所有幻灯片的总宽度，即每个700px。并且只允许1个幻灯片在宽度等于700px的视口中显示。但是，当我点击下一步时，即使没有更多幻灯片，节目也会继续播放。

解决方案是在最后一张幻灯片显示在视口中时隐藏“下一步”按钮。我该怎么做？

或者也许欢迎另一种解决方案......

这是我的简化代码：

var slideList = $('#slideWindow ul')

$('#next').click(function(e){

    slideList.animate({ 'left': '-=700px' });

    if( $('li:last').next() === 0 ){

        $(this).hide();

    } else {

        $(this).show();

    }

    return false;

});

Answer 1

如果当前正在查看的classBeingViewed应用了特定的课程li，您可以这样做：

if($('li').last() == $('li.classBeingViewed')){
    $(this).hide();
else {
    $(this).show();
}

或者您可以跟踪索引。这是优选的，因为它允许双向动画。

var slideList = $('#slideWindow ul');
var listIndex = 0;
var numLiElements = $('li').length;

$('#next').click(function(e){
    slideList.animate({ 'left': '-=700px' });
    if( listIndex == numLiElements ){
        $(this).hide();
    } else {
        listIndex += 1;
        $(this).show();
    }
    return false;
});

然后，当您想要反转动画时，可以将点击处理程序中的listIndex减少到$('#previous')。

如何知道我是否到达了最后一个'li'项目

1 个答案: