스크립트 슬라이드 문제 채택완료
최오구
8년 전
조회 1,959
$(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년 전
</p><p><!DOCTYPE html></p><p><html></p><p> <head></p><p> <style type="text/css"></p><p> .wrap {</p><p> /* ------------------------------------------- */</p><p> /* debug */</p><p> /* overflow: visible; margin-left: 5.0em; */</p><p>
</p><p> /* normal */</p><p> overflow: hidden;</p><p> /* ------------------------------------------- */</p><p>
</p><p> height: 390px;</p><p> width: 100px;</p><p> border: 1px solid darkkhaki;</p><p> }</p><p> .box_nav { cursor: pointer; }</p><p> .box { position: relative; list-style-type: none; }</p><p> .boxin { height: 65px; }</p><p> </style></p><p> <script type="text/javascript" src="<a href="<a href="http://code.jquery.com/jquery.min.js" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery.min.js</a>"><a href="http://code.jquery.com/jquery.min.js" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery.min.js</a></a>"></script></p><p> <script type="text/javascript"></p><p> $(function () {</p><p> $("#box_prev").bind("click", function () {</p><p> $("#box").animate({</p><p> top: "-=65"</p><p> }, {</p><p> complete: function () {</p><p> $(this).find("li").first().appendTo($(this));</p><p> $(this).css({top: 0});</p><p> }</p><p> });</p><p> });</p><p> $("#box_next").bind("click", function () {</p><p> $("#box").animate({</p><p> top: "-=65"</p><p> }, {</p><p> duration: 0,</p><p> complete: function () {</p><p> $(this).find("li").last().prependTo($(this));</p><p> }</p><p> }).animate({</p><p> top: "+=65"</p><p> });</p><p> });</p><p> });</p><p> </script></p><p> </head></p><p> <body></p><p> <div class="box_nav" id="box_prev">prev</div></p><p> <div class="wrap"></p><p> <ul class="box" id="box"></p><p> <li class="boxin">사진1</li></p><p> <li class="boxin">사진2</li></p><p> <li class="boxin">사진3</li></p><p> <li class="boxin">사진4</li></p><p> <li class="boxin">사진5</li></p><p> <li class="boxin">사진6</li></p><p> <li class="boxin">사진7</li></p><p> </ul></p><p> </div></p><p> <div class="box_nav" id="box_next">next</div></p><p> </body></p><p></html></p><p>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인