제이쿼리,자바스크립트 질문입니다. 채택완료
psj9716
8년 전
조회 15,047
http://jisu.webnain.com/naver/card.html" style="color: rgb(0, 0, 0);">http://jisu.webnain.com/naver/card.html
카트셔플이라는 애니메이션을 하는 중 재밋는 생각이 들어서 만들고있습니다.
펼치면 위아래 화살표가 있는데요 일단 제가
$('.open').click(function() {
$(".grid").show();
for(var i=0; i<5; i++) {
$('.card').eq(i).show();
}
를 해놔서 5개식 뜨고있습니다.
화살표 위아래 누르면 다음사진, 다시 전사진으로 나오게하려면 어떡게할까요..
위아래 또는 좌우화살표를넣어서
전역변수로
0~4일때는 뭐 전역변수 x라고 치면
x==1일때
아아
x==2일때는
위로가면
x=1로바뀌고
0~4번째
사진보여주고
밑으로 다시 내리면
x=2로 바꾸고
5~9번째사진보여주고
이렇게 짜고싶습니다.. 스크립트가 미숙한지라 짜기가 너무 어렵습니다. 도와주세요
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
8년 전
저두 스크립트 잘못하지만
굳이 eq를 쓰실 필요가있을까요?
제가 질문자님의 의도를 잘못파악한것 인지는 모르겠지만.
그냥 생각 나는 대로 짜봤습니다
</p><p style="margin-left: 40px;">
</p><p style="margin-left: 40px;"><script src="<a href="<a href="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" target="_blank" rel="noopener noreferrer">https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js</a>"><a href="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" target="_blank" rel="noopener noreferrer">https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js</a></a>"></script></p><p style="margin-left: 40px;"><script></p><p style="margin-left: 40px;"><span style="white-space:pre"> </span>$(document).ready(function(){</p><p style="margin-left: 40px;"><span style="white-space:pre"> </span>$('.top').click(function() {</p><p style="margin-left: 40px;"><span style="white-space:pre"> </span>//alert();</p><p style="margin-left: 40px;"><span style="white-space:pre"> </span>$(".grid").show();</p><p style="margin-left: 40px;"><span style="white-space:pre"> </span>$(".grid2").hide();</p><p style="margin-left: 40px;"><span style="white-space:pre"> </span>});</p><p style="margin-left: 40px;"><span style="white-space:pre"> </span>$('.below').click(function() {</p><p style="margin-left: 40px;"><span style="white-space:pre"> </span>//alert();</p><p style="margin-left: 40px;"><span style="white-space:pre"> </span>$(".grid").hide();</p><p style="margin-left: 40px;"><span style="white-space:pre"> </span>$(".grid2").show();</p><p style="margin-left: 40px;"><span style="white-space:pre"> </span>});</p><p style="margin-left: 40px;"><span style="white-space:pre"> </span>});</p><p style="margin-left: 40px;"></script></p><p style="margin-left: 40px;">
</p><p style="margin-left: 40px;"><a href=# class="top">위</a></p><p style="margin-left: 40px;"><a href=# class="below">아래</a></p><p style="margin-left: 40px;"><div class="grid" style="display:none;"></p><p style="margin-left: 40px;"><span style="white-space:pre"> </span><ul></p><p style="margin-left: 40px;"><span style="white-space:pre"> </span><li>1</li></p><p style="margin-left: 40px;"><span style="white-space:pre"> </span><li>2</li></p><p style="margin-left: 40px;"><span style="white-space:pre"> </span><li>3</li></p><p style="margin-left: 40px;"><span style="white-space:pre"> </span><li>4</li></p><p style="margin-left: 40px;"><span style="white-space:pre"> </span><li>5</li></p><p style="margin-left: 40px;"><span style="white-space:pre"> </span></ul></p><p style="margin-left: 40px;"></div></p><p style="margin-left: 40px;"><div class="grid2" style="display:none;"></p><p style="margin-left: 40px;"><span style="white-space:pre"> </span><ul></p><p style="margin-left: 40px;"><span style="white-space:pre"> </span><li>5</li></p><p style="margin-left: 40px;"><span style="white-space:pre"> </span><li>6</li></p><p style="margin-left: 40px;"><span style="white-space:pre"> </span><li>7</li></p><p style="margin-left: 40px;"><span style="white-space:pre"> </span><li>8</li></p><p style="margin-left: 40px;"><span style="white-space:pre"> </span><li>9</li></p><p style="margin-left: 40px;"><span style="white-space:pre"> </span></ul></p><p style="margin-left: 40px;"></div></p><p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
p
psj9716
8년 전
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
그래서 그런지 스크립트부분은 알겠는데 밑에 body에들어갈 부분들은 어디에 넣어야하는지 알려주세요