공지사항 자동롤링 질문드립니다

아이고배냥 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2017.02.14 16:16:41 3392 (175.♡.♡.120)

답변 1

본문

안녕하세요.. 제이쿼리를 공부하고 있는 초보입니다..

공지사항 상하로 롤링되는건데요...

마지막글에서 다시 처음으로 올라갑니다...

마지막글에서 다시 1로 자연스럽게 내려가고싶은데

prepend, append 써봐도 안되네요ㅠㅠ 옵션설정을 어떻게 잡아야 할가요 ㅠㅠ

정말궁금합니다 도와주세요 ㅠㅠㅠㅠ


<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>board</title>
	<link rel="stylesheet" media="screen" />
	<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
	<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
</head>
<style>
*{padding:0; margin:0}
.boardArea {width:100%; height:50px; overflow:hidden; background-color:#fff;}
.boardList {position:relative; width:100%; height:auto;}
.boardList li {width:100%; height:50px; line-height:50px;}
 
.navBox {position:absolute; top:50px;}
.more {position:absolute; top:100px;}
 
 
</style>
</head>
 
<body>
 
<div class="boardArea">
	<div class="navBox">
		<a href="" class="prev">이전</a>
		<a href="" class="next">다음</a>
	</div>
	<ul class="boardList">
		<li>
			<a href="">11111111111111111</a>
		</li>
		<li>
			<a href="">22222222222222222</a>
		</li>
		<li>
			<a href="">33333333333333333</a>
		</li>
		<li>
			<a href="">44444444444444444</a>
		</li>
		<li>
			<a href="">55555555555555555</a>
		</li>
	</ul>
	<a href="" class="more">더보기</a>
</div>
 
</body>
 
<script>
$(document).ready(function(){
	var $bardArea = $(".boardArea"),
		$boardBox = $(".boardList"),
		$boardList = $boardBox.find("li"),
		$nav = $(".navBox"),
	
		areaHeight =  $(".boardArea").height(),
		listCount = $(".boardList li").length,
		maxHeight = areaHeight * listCount,
		currentIndex = 0,
		duration = 500,
		interval = 1000,
		easing = "swing",
		timer;
	
	function rollingList(index){
		$boardBox.animate({top:"-100" * index +"%"}, duration, easing);
		currentIndex = index;
	}
	
	function startTimer () {
		timer = setInterval(function(){
			var nextIndex = currentIndex + 1;
			if (nextIndex > listCount - 1){
				nextIndex = 0;
			} 
			rollingList(nextIndex);
		}, interval);
	}
	$boardBox.append($boardList.first().clone());
	function stopTimer (){
		clearInterval(timer);
	}
	
	$nav.on('click', 'a', function (event) {
        event.preventDefault();
        if ($(this).hasClass('prev')) {
            rollingList(currentIndex - 1);
        } else if ($(this).hasClass('next')) {
            rollingList(currentIndex + 1);
        } 
		if (currentIndex < 0){
			$boardBox.prepend($boardList.last().clone());
		} else if (currentIndex > 4){
			$boardBox.append($boardBox.find("li").clone());
		}
	});
	
	
	$bardArea.on({
		mouseenter: stopTimer,
		mouseleave: startTimer
	});
	
	startTimer();
	
	
});
 
</script>
 
</html>