때 (jQuery를 스크롤하려면 다음을 사용) 마지막으로 리

Question

임 수평 웹 페이지 을 만들고으로 이동의 청춘은 메인 메뉴 난 다음 및 이전 버튼 을 사용하지만 내가 jQuery를 사용하고 경우가 있기 때문에 그것은 마지막 리 나는 그것이 마지막 요소에 도달하면 다시 처음 elemebt에 도달하거나하는 방법을 알아야 스크립트 오류 에 갈 때

자사의 문제

이 지금

<ul class="hidden-container"> 
    <li id="left" class="left"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
     proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
    </li> 
    <li id="home" class="left"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
     proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
    </li> 
    <li id="right" class="left"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
     proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
    </li> 
    </ul> 

내 코드입니다

및 자바 스크립트 :

<script> 
$(function(){ 
    $('html, body').animate({ scrollLeft: $("#home").offset().left }); 

    var currentElement = $("li#home"); 

    // completely ignoring boundaries 


    $("#prev").click(function() { 
    currentElement = currentElement.prev(); 
    scrollTo(currentElement); 
    }); 
    $("#next").click(function() { 
    currentElement = currentElement.next(); 
    scrollTo(currentElement); 
    }); 
    function scrollTo(element) { 
    $(window).scrollLeft(element.position().left); 
    } 

}); 

</script> 

CSS의 :

body { 
     height: 800px; 
     width: 940px; 
    } 

    #container { 
     width: 2700px; 
     position: relative;  
    } 
    #prev { 
     position: fixed; 
     z-index: 6; 
     top: 0; 
     left: 0; 
    } 
    #next { 
     position: fixed; 
     z-index: 7; 
     top: 0; 
     right: 0; 
    } 
    .hidden-container { 
     position: absolute; 
     left: 0; 
     top: 0; 
     z-index: 1; 
    } 
    #home { 
     width: 700px; 
     visibility: hidden; 
    } 
    #left { 
     width: 700px; 
     visibility: hidden; 
    } 
    #right { 
     width: 700px; 
     visibility: hidden; 
    } 

임 윈도우 뷰포트 센터에 강제 또는 #home로 이동합니다 첫 번째로드에서 수 있도록 홈이 중심에 있기 때문에 scrollLeft에를 사용하여

감사

Answer 1

currentElement 빈 jQuery를 수집 할 수있다. 빈 컬렉션 인 경우 동일한 컬렉션의 첫 번째/마지막 컬렉션으로 간단하게 바꿀 수 있습니다.

$("#prev").click(function() { 
var ce = currentElement.prev(); 
if (!ce.length) { 
    ce = currentElement.last(); 
} 
scrollTo(ce); 
}); 
$("#next").click(function() { 
var ce = currentElement.next(); 
if (!ce.length) { 
    ce = currentElement.first(); 
} 
scrollTo(ce); 
}); 

Answer 2

현재 요소 뒤에 다른 요소가 있는지 확인해야합니다. 마지막 li 다음에 아무 것도 없기 때문에 아무 것도 반환되지 않으면 .next()으로 오류가 발생합니다.

$("#next").click(function() { 
    if (currentElement.next().length > 0) { 
     currentElement = currentElement.next(); 
    } else { 
     currentElement = $("li#left"); 
    } 
    scrollTo(currentElement); 
} 

당신은 이전 요소가 있다는 것을 보장 또는 #right에 목표를 설정, 다른 버튼에 대한 동일한 작업을 수행해야합니다.