공지사항 자동롤링 질문드립니다
본문
안녕하세요.. 제이쿼리를 공부하고 있는 초보입니다..
공지사항 상하로 롤링되는건데요...
마지막글에서 다시 처음으로 올라갑니다...
마지막글에서 다시 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>
답변을 작성하시기 전에 로그인 해주세요.
