제이쿼리,자바스크립트 질문입니다.
본문
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
저두 스크립트 잘못하지만
굳이 eq를 쓰실 필요가있을까요?
제가 질문자님의 의도를 잘못파악한것 인지는 모르겠지만.
그냥 생각 나는 대로 짜봤습니다
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.top').click(function() {
//alert();
$(".grid").show();
$(".grid2").hide();
});
$('.below').click(function() {
//alert();
$(".grid").hide();
$(".grid2").show();
});
});
</script>
<a href=# class="top">위</a>
<a href=# class="below">아래</a>
<div class="grid" style="display:none;">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div class="grid2" style="display:none;">
<ul>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
관심을 가져주시고 해주셔서 감사합니다. 제가 초짜이기에 보이는게 좀 짧습니다.
그래서 그런지 스크립트부분은 알겠는데 밑에 body에들어갈 부분들은 어디에 넣어야하는지 알려주세요
답변을 작성하시기 전에 로그인 해주세요.
