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

How to detect that the last or 1st list item is displayed in its container with javascript/jquery

本文关键字：显示 是否 列表 第一个 javascript 何使用 jquery 检测 最后一个      更新时间：2023-09-26

我第一次执行旋转木马，很难检测列表中的最后一个或第一个<li>何时显示在视口（其容器）中。我希望当最后一个项目显示时，可以禁用下一个或上一个按钮，或者从第一个开始继续，反之亦然（我还没有决定应该发生什么…）。请不要使用插件，我仍处于学习阶段。。。

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%;
}

非常感谢

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

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);

同样的条件适用于正确的位置和固定上一个按钮。

我已经测试了Next。

新的更新答案

我更新了你的小提琴。。。供参考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));
    }
});

我对以下问题/答案给予了一些赞扬：

增加和减少变量，直到在javascript 中达到一个数字

jQuery每次单击都会附加不同的文本

相关文章：