제이쿼리,자바스크립트 질문입니다. 채택완료
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에들어갈 부분들은 어디에 넣어야하는지 알려주세요