jquery-carousel 효과를 사용하여 목록을 반복하십시오.

Question

회전식 효과를 만드는 목록을 반복하려고합니다. 수학을 할 수 있도록 먼저 모든 목록의 수를 알아야한다고 생각합니다. 다음과 같은 일을 할 수 있습니다. 다른면에 추가하면 다른면에서 무언가가 제거됩니다. 따라서 첫 번째 목록 항목을 제거하면 마지막 항목이 추가됩니다. 몇 가지 문제 먼저 last 및 first 방법은 당신이 생각하는 방식으로 작동하지 않습니다 거기

$(function() { 

    $('#up').mouseenter(goUp); 
    $('#down').mouseenter(goDown); 

    function goUp() { 
     $('#list').last('li').remove; 
     $('#list').first('li').append('put the first item here') 
    } 


    function goDown() { 
     $('#list').first('li').remove; 
     $('#list').last('li').append('put the first item here') 
    } 

} 

<a id="up">+</a> 
<ul id="list"> 
    <li>1</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
<li>5</li> 

</ul> 

<a id="down">-</a> 

Answer 1

오류가 많으며 논리가 잘못되었다고 생각합니다. .current 클래스를 사용하고 hide() 또는 show() 항목을 사용하려고합니다. 이런 식으로하면 효과가 있습니다.

$items.hide().first().addClass('cur').show(); 

var actions = { 
    getCurIdx: function(){ 
     return $items.filter('.cur').index(); 
    }, 
    goTo: function(idx){ 
     // Something like... 
     $items 
     .removeClass('cur').hide() 
     .eq(idx).addClass('cur').show(); 
    }, 
    next: function(){ 
     var _idx = actions.getCurIdx(); 
     if(_idx < $items.length) { 
      actions.goTo(_idx+1); 
     } else { 
      actions.goTo(0); // Go first 
     } 
    }, 
    prev: function(){ 
     var _idx = actions.getCurIdx(); 
     if(_idx >= 0) { 
      actions.goTo(_idx-1); 
     } else { 
      actions.goTo($items.length-1); // Go last 
     } 
    } 
}; 

$next.click(function(){ actions.next(); }); 
$prev.click(function(){ actions.prev(); }); 

Answer 2

, 당신은 그래서 당신이 실제로 무슨 일을하는지 찾아 내고 그들에게 (doc를) 셀렉터를 통과하지 일치하는 셀렉터 내의 마지막 요소는 #list이다. 사용하고자하는 것은 :last 선택 자 (doc) (및 :first)이며 선택자는로 변경됩니다.

다음 remove은 속성이 아닌 메서드이므로 일부 대괄호가 누락되었습니다. 또한 remove은 작업 한 jQuery 객체를 반환하므로 DOM에서 위치를 변경할 수 있습니다.

Here is a jsfiddle 원하는 것을 구현합니다. before 및 after 메서드를 사용하여 새 항목을 DOM에 올바르게 삽입합니다.