스크립트 슬라이드 문제
본문
$(function(){
n = 1
cleaarid=0
cleaarid=setInterval(function(){next()},4000)
function next(){
n += 1
if(n==5){
$('.box').css('top',0)
n=2
}
$('.box').stop().animate({'top':(n-1)*-65})
}//next end
function prev(){
n -= 1
if(n==0){
$('.box').css('top',-390)
n=3
}
$('.box').stop().animate({'top':(n-1)*-65})
}//prev end
사진 7장을 전, 후 버튼을 사용하여 아래에서 위로 올라가게 하려는데 순서도 뒤죽박죽으로 움직이고
버튼도 안먹히네요ㅠㅠ 어디를 수정해야 할까요 ㅠㅠㅠㅠㅠ도와주세여
답변 1
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.wrap {
/* ------------------------------------------- */
/* debug */
/* overflow: visible; margin-left: 5.0em; */
/* normal */
overflow: hidden;
/* ------------------------------------------- */
height: 390px;
width: 100px;
border: 1px solid darkkhaki;
}
.box_nav { cursor: pointer; }
.box { position: relative; list-style-type: none; }
.boxin { height: 65px; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#box_prev").bind("click", function () {
$("#box").animate({
top: "-=65"
}, {
complete: function () {
$(this).find("li").first().appendTo($(this));
$(this).css({top: 0});
}
});
});
$("#box_next").bind("click", function () {
$("#box").animate({
top: "-=65"
}, {
duration: 0,
complete: function () {
$(this).find("li").last().prependTo($(this));
}
}).animate({
top: "+=65"
});
});
});
</script>
</head>
<body>
<div class="box_nav" id="box_prev">prev</div>
<div class="wrap">
<ul class="box" id="box">
<li class="boxin">사진1</li>
<li class="boxin">사진2</li>
<li class="boxin">사진3</li>
<li class="boxin">사진4</li>
<li class="boxin">사진5</li>
<li class="boxin">사진6</li>
<li class="boxin">사진7</li>
</ul>
</div>
<div class="box_nav" id="box_next">next</div>
</body>
</html>
답변을 작성하시기 전에 로그인 해주세요.
