Как определить, что последний или первый элемент списка отображается в его контейнере с помощью javascript / jquery

Question

Я делаю карусель в первый раз, и мне трудно определить, когда последний или первый <li> в списке отображается в окне просмотра (его контейнер). Я хочу, чтобы при отображении последнего элемента отключались кнопки «Следующая» или «Предыдущая», или продолжалось с 1-го или наоборот (я еще не решил, что должно произойти ...). И никаких плагинов, пожалуйста, я все еще на этапе обучения ...

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

То же самое условие для правильной позиции и исправления для предыдущей кнопки.

Я проверял на Next.

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

Я отдаю должное следующим вопросам / ответам:

Увеличивайте и уменьшайте переменную, пока число не будет достигнуто в javascript

jQuery добавляет различный текст каждый клик