如何使用 javascript/jquery 检测最后一个或第一个列表项是否显示在其容器中

Question

我第一次做轮播，我很难检测列表中的最后一个或第一个

何时显示在视口（其容器）中。我希望当显示最后一个项目时禁用下一个或上一个按钮，或者从第一个按钮继续，反之亦然（我还没有决定应该发生什么......）。请不要使用插件，我仍处于学习阶段...

JSFiddle： http://jsfiddle.net/aayPV/

var slidesList = $('#slides').find('ul'),
    slide = $('#slides li');

slidesList.css('width', (slide.length * slide.outerWidth(true)));

$('#ctrls').delegate('a', 'click', function(e) {
  var thisElem = $(this),
      lastLiPos = slidesList.find('li:last').position(),
      lastLiPosLeft = lastLiPos.left,
      lastLiPosTop = lastLiPos.top;

  e.preventDefault();

  if (thisElem.hasClass('next')) {
    slidesList.animate({ marginLeft: '-=' + slide.outerWidth(true) + 'px' }, 300);
    if ($('#slides li:last').position().left < ((slide.length * slide.outerWidth(true)) - (slide.outerWidth(true) * 5))) {
        //Disable nextbutton
    }
  } else if (thisElem.hasClass('prev')) {
    slidesList.animate({ marginLeft: '+=' + slide.outerWidth(true) + 'px' }, 300);

    //If 1st item is displayed, disable prev button
  }
});

HTML：

<div id="carousel">
  <div id="ctrls">
    <a href="#" class="prev">Prev</a>
    <a href="#" class="next">Next</a>
  </div>

  <div id="slides">
     <ul>
       <li><p>1</p></li>
       <li><p>2</p></li>
       <li><p>3</p></li>
       <li><p>4</p></li>
       <li><p>5</p></li>
     </ul>
  </div>
</div>

CSS：

#ctrls {
    margin-bottom: 10px;
}

#slides {
    width: 305px;
    border: 1px solid #555;
    overflow: hidden;
}
#slides li {
    width: 100px;
    height: 100px;
    border: 1px solid #999;
    background: #e5e5e5;
    float: left;
    color: #777;
}
#slides li p {
    font-family: arial, tahoma;
    font-size: 46px;
    font-weight: bold;
    text-align: center;
    margin-top: 25%;
}

非常感谢

Answer 1

我希望下面的代码能够帮助您，

if (thisElem.hasClass('next')) {
    if(lastLiPosLeft >= 2 )  { //I have edited this line changed >=0 to >=2
    slidesList.animate({ marginLeft: '-=' + slide.outerWidth(true) + 'px' }, 300);

    }
    else  {
        $(".next").css('display', 'none');
    }
} else if (thisElem.hasClass('prev')) {
    //if(  ) //this is for previous button
    slidesList.animate({ marginLeft: '+=' + slide.outerWidth(true) + 'px' }, 300);

相同的条件适用于正确的位置并修复上一个按钮。

我已经测试了下一个。

Answer 2

新更新的答案

我已经更新了你的小提琴...
供参考 http://jsfiddle.net/aayPV/22/

我认为检查单个变量比检查滑块的位置与总滑块的长度要有效得多...

var slidesList = $('#slides').find('ul'),
    slide = $('#slides li');

slidesList.css('width', (slide.length * slide.outerWidth(true)));

var i=0,
    last = slide.length - 3;

$('#ctrls').delegate('a', 'click', function(e) {
    var thisElem = $(this),
        lastLiPos = slidesList.find('li:last').position(),
        lastLiPosLeft = lastLiPos.left,
        lastLiPosTop = lastLiPos.top;


    console.log(lastLiPosLeft, '\n', slidesList.position().left);

    e.preventDefault();

    if (thisElem.hasClass('next')) {
        if(i==last) {
             alert('end'); return false;
        } else {
            ++i;
            slidesList.animate({ marginLeft: '-=' + slide.outerWidth(true) + 'px' }, 300);
        }
    } else {
        if (thisElem.hasClass('prev')) {
            if(i==0) {
                 alert('beginning'); return false;
            } else {
                --i;
                slidesList.animate({ marginLeft: '+=' + slide.outerWidth(true) + 'px' }, 300);
            }
        }
    }
});

---

旧的原始答案

http://jsfiddle.net/YmjF7/31/

var items = $('li');

var i = 0,
    last = items.length -1;

$('#next').click(function(){
    //increment i until it reaches the end of the array
    if(i == last) {alert('end'); return false;} else {
        i++;
        i = i % items.length;
        alert('Item '+ (i+1));
    }
});

$('#prev').click(function(){
    //decrease i until it reaches the beginning of the array
    if(i == 0) {alert('beginning'); return false;} else {
        --i;
        i = i % items.length;
        alert('Item '+ (i+1));
    }
});

我对以下问题/答案给予一些信任：

<一href="https://stackoverflow.com/questions/5496576/increase-and-decrease-a-variable-until-a-number-is-reached-in-javascript">增加和减少变量，直到达到某个数字在 JavaScript 中

jQuery 每次点击附加不同的文本