스크립트 슬라이드 문제 채택완료
$(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개
채택된 답변
+20 포인트
8년 전
Copy
<!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>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인