전역변수 스크립트 채택완료
http://jisu.webnain.com/naver/card.html">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일때
답변 2개
다시 해서 올립니다.
한번 애니메이션이 진행되면 두번째 호출시 애니메이션이 안되는데 이건 플러그인을 확인하셔아할듯 합니다.
도움이 되셨길 바랍니다.
</strong></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><html><head></b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><meta charset="UTF-8"></b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><link rel="stylesheet" type="text/css" href="<a href="<a href="http://jisu.webnain.com/naver/css/mu.css" target="_blank" rel="noopener noreferrer">http://jisu.webnain.com/naver/css/mu.css</a>"><a href="http://jisu.webnain.com/naver/css/mu.css" target="_blank" rel="noopener noreferrer">http://jisu.webnain.com/naver/css/mu.css</a></a>"></b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><style type="text/css"></b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b>html,body {margin:0;padding:0;height:100%;font-family: 'NanumGothic', sans-serif;width:100%}</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b>a {text-decoration: none;}</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b>img {border-style:none;}</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b>ul{list-style: none;}</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b>body {letter-spacing:0.05em;font-size:13px;background:url("<a href="<a href="http://jisu.webnain.com/naver/img/bg.jpg" target="_blank" rel="noopener noreferrer">http://jisu.webnain.com/naver/img/bg.jpg</a>"><a href="http://jisu.webnain.com/naver/img/bg.jpg" target="_blank" rel="noopener noreferrer">http://jisu.webnain.com/naver/img/bg.jpg</a></a>");background-repeat: no-repeat;background-size: cover; box-sizing: border-box;height:100%}</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b>* {padding:0;margin:0;}</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b>.cf:after{ display: block; clear: both;}</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b>#center {width:777px;margin:0 auto;text-align:Center;height:697px;}</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b>#center .clock {color:#fff;overflow:hidden;width:100%; height:165px; line-height:164px; color:#666;font-size:164px; text-align:center;font-weight:500;}</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b>#center b {color:#fff;overflow:hidden;width:100%; height:54px;font-size:40px; text-align:left;font-weight:600}</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b>#center .naver-search-input {color:#fff;width:690px; height: 37px;background: transparent;border: 0 !important;border-bottom: 2px solid rgba(255, 255, 255, 0.7) !important;font-size: 14px;font-weight: bold;padding:20px 9px 6px 50px;}</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b>input:focus { outline: none;}</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b>#center .cen {position:Absolute;left:0;top:0;bottom:0;margin-top:auto;margin-bottom:auto;width:100%;height:300px;}</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b>input::-webkit-input-placeholder { color: #fff; }</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b>.naver-logo { position: relative; top: 3px; left: 45px; display: inline-block; width: 15px; height: 15px; background: url("./img/naver-logo.png") no-repeat;border-right:1px solid #fff;padding-right:12px}</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b>.naver-search-btn {position: relative;top: 10px;right: 30px; display: inline-block; width: 16px;height: 16px;cursor: pointer;background: url("./img/btn-search.png") no-repeat; border: 0; outline: none;}</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b>#footer {position: absolute; left: 0;bottom: 0; width: 100%; box-sizing: border-box; height: 60px; padding: 0 103px 30px 40px; z-index: 10; min-width: 760px;text-align: right;}</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b></style></b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b></head></b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><body data-vide-bg="/SRC2/fullvideo/examples/video/ocean"></b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><script src="<a href="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" target="_blank" rel="noopener noreferrer">http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js</a>"><a href="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" target="_blank" rel="noopener noreferrer">http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js</a></a>"></script></b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><script src="/SRC2/fullvideo/dist/jquery.vide.min.js"></script></b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b>
</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><div id="warp"></b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span><div class="grid" style="display: none;"></b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span><div class="back_color"></b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span><button style="position:fixed;border:none;right:60px;top:80px" class="close" ></button></b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span><ul class="list"></b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span><li class="card" style="display: none;"><img src="<a href="<a href="http://jisu.webnain.com/naver/img/bg.jpg" target="_blank" rel="noopener noreferrer">http://jisu.webnain.com/naver/img/bg.jpg</a>"><a href="http://jisu.webnain.com/naver/img/bg.jpg" target="_blank" rel="noopener noreferrer">http://jisu.webnain.com/naver/img/bg.jpg</a></a>" alt=""></li></b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span><li class="card" style="display: none;"><img src="<a href="<a href="http://jisu.webnain.com/naver/img/bg2.jpg" target="_blank" rel="noopener noreferrer">http://jisu.webnain.com/naver/img/bg2.jpg</a>"><a href="http://jisu.webnain.com/naver/img/bg2.jpg" target="_blank" rel="noopener noreferrer">http://jisu.webnain.com/naver/img/bg2.jpg</a></a>" alt=""></li></b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span><li class="card" style="display: none;"><img src="<a href="<a href="http://jisu.webnain.com/naver/img/bg3.jpg" target="_blank" rel="noopener noreferrer">http://jisu.webnain.com/naver/img/bg3.jpg</a>"><a href="http://jisu.webnain.com/naver/img/bg3.jpg" target="_blank" rel="noopener noreferrer">http://jisu.webnain.com/naver/img/bg3.jpg</a></a>" alt=""></li></b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span><li class="card" style="display: none;"><img src="<a href="<a href="http://jisu.webnain.com/naver/img/bg4.jpg" target="_blank" rel="noopener noreferrer">http://jisu.webnain.com/naver/img/bg4.jpg</a>"><a href="http://jisu.webnain.com/naver/img/bg4.jpg" target="_blank" rel="noopener noreferrer">http://jisu.webnain.com/naver/img/bg4.jpg</a></a>" alt=""></li></b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span><li class="card" style="display: none;"><img src="<a href="<a href="http://jisu.webnain.com/naver/img/bg.jpg" target="_blank" rel="noopener noreferrer">http://jisu.webnain.com/naver/img/bg.jpg</a>"><a href="http://jisu.webnain.com/naver/img/bg.jpg" target="_blank" rel="noopener noreferrer">http://jisu.webnain.com/naver/img/bg.jpg</a></a>" alt=""></li></b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b>
</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span><li class="card" style="display: none;"><img src="<a href="<a href="http://jisu.webnain.com/naver/img/bg.jpg" target="_blank" rel="noopener noreferrer">http://jisu.webnain.com/naver/img/bg.jpg</a>"><a href="http://jisu.webnain.com/naver/img/bg.jpg" target="_blank" rel="noopener noreferrer">http://jisu.webnain.com/naver/img/bg.jpg</a></a>" alt=""></li></b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span><li class="card" style="display: none;"><img src="<a href="<a href="http://jisu.webnain.com/naver/img/bg2.jpg" target="_blank" rel="noopener noreferrer">http://jisu.webnain.com/naver/img/bg2.jpg</a>"><a href="http://jisu.webnain.com/naver/img/bg2.jpg" target="_blank" rel="noopener noreferrer">http://jisu.webnain.com/naver/img/bg2.jpg</a></a>" alt=""></li></b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span><li class="card" style="display: none;"><img src="<a href="<a href="http://jisu.webnain.com/naver/img/bg3.jpg" target="_blank" rel="noopener noreferrer">http://jisu.webnain.com/naver/img/bg3.jpg</a>"><a href="http://jisu.webnain.com/naver/img/bg3.jpg" target="_blank" rel="noopener noreferrer">http://jisu.webnain.com/naver/img/bg3.jpg</a></a>" alt=""></li></b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span><li class="card" style="display: none;"><img src="<a href="<a href="http://jisu.webnain.com/naver/img/bg4.jpg" target="_blank" rel="noopener noreferrer">http://jisu.webnain.com/naver/img/bg4.jpg</a>"><a href="http://jisu.webnain.com/naver/img/bg4.jpg" target="_blank" rel="noopener noreferrer">http://jisu.webnain.com/naver/img/bg4.jpg</a></a>" alt=""></li></b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span><li class="card" style="display: none;"><img src="<a href="<a href="http://jisu.webnain.com/naver/img/bg.jpg" target="_blank" rel="noopener noreferrer">http://jisu.webnain.com/naver/img/bg.jpg</a>"><a href="http://jisu.webnain.com/naver/img/bg.jpg" target="_blank" rel="noopener noreferrer">http://jisu.webnain.com/naver/img/bg.jpg</a></a>" alt=""></li></b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b>
</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span><li class="card" style="display: none;"><img src="<a href="<a href="http://jisu.webnain.com/naver/img/bg4.jpg" target="_blank" rel="noopener noreferrer">http://jisu.webnain.com/naver/img/bg4.jpg</a>"><a href="http://jisu.webnain.com/naver/img/bg4.jpg" target="_blank" rel="noopener noreferrer">http://jisu.webnain.com/naver/img/bg4.jpg</a></a>" alt=""></li></b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span><li class="card" style="display: none;"><img src="<a href="<a href="http://jisu.webnain.com/naver/img/bg.jpg" target="_blank" rel="noopener noreferrer">http://jisu.webnain.com/naver/img/bg.jpg</a>"><a href="http://jisu.webnain.com/naver/img/bg.jpg" target="_blank" rel="noopener noreferrer">http://jisu.webnain.com/naver/img/bg.jpg</a></a>" alt=""></li></b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span><li class="card" style="display: none;"><img src="<a href="<a href="http://jisu.webnain.com/naver/img/bg2.jpg" target="_blank" rel="noopener noreferrer">http://jisu.webnain.com/naver/img/bg2.jpg</a>"><a href="http://jisu.webnain.com/naver/img/bg2.jpg" target="_blank" rel="noopener noreferrer">http://jisu.webnain.com/naver/img/bg2.jpg</a></a>" alt=""></li></b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span><li class="card" style="display: none;"><img src="<a href="<a href="http://jisu.webnain.com/naver/img/bg4.jpg" target="_blank" rel="noopener noreferrer">http://jisu.webnain.com/naver/img/bg4.jpg</a>"><a href="http://jisu.webnain.com/naver/img/bg4.jpg" target="_blank" rel="noopener noreferrer">http://jisu.webnain.com/naver/img/bg4.jpg</a></a>" alt=""></li></b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span><li class="card" style="display: none;"><img src="<a href="<a href="http://jisu.webnain.com/naver/img/bg.jpg" target="_blank" rel="noopener noreferrer">http://jisu.webnain.com/naver/img/bg.jpg</a>"><a href="http://jisu.webnain.com/naver/img/bg.jpg" target="_blank" rel="noopener noreferrer">http://jisu.webnain.com/naver/img/bg.jpg</a></a>" alt=""></li></b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span></ul></b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span></div></b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span><button style="position:fixed;border:none;right:900px;top:50px" class="left"></button></b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span><button style="position:fixed;border:none;right:900px;bottom:50px" class="right"></button></b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span></div></b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span><div id="footer"></b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span><div style="float:right;z-index:10"></b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span><button style="width: 100px;height: 25px; background-color: #fff; border: 5px double #448288; line-height: 1px;" class="open" page="0" >펼치기</button></b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span></div></b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span></div></b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span><script></b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b> </b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b>
</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b>var per = 5 ; </b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b> </b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b>$('.close').click(function() { </b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span>$(".card").hide();</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span>$(".grid").hide();</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b>});</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b>
</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b>
</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b>
</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b>$('.open').click(function() { </b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span>$(".grid").show();</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b> listing();</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b>});</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b>$('.right').click(function() {</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span>if($('.open').attr("page") == 2){</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span>alert("No More Data");</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span>}else{</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span> </b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span>$('.open').attr("page",$('.open').attr("page")*1+1);</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span>listing();</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span>}</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b>}); </b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b>$('.left').click(function() {</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span>if($('.open').attr("page") == 0){</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span>alert("No More Data");</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span>}else{</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span> </b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span>$('.open').attr("page",$('.open').attr("page")*1-1);</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span>listing();</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span>}</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span> </b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b>}); </b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b>function listing(){ </b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b>
</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span>$('.card').hide();</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span>$('.card').attr("class","card");</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span>for(var i=($('.open').attr("page")*per); i<($('.open').attr("page")*per+per); i++) {</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span>$('.card').eq(i).show();</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span>$(".card").eq(i).attr("class", "card ani" + i);</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b><span style="white-space:pre"> </span>}</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b> </b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b> </b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b>}</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b> </b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b></script></b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b>
</b></span></span></p><p><span style="font-family: Arial, 돋움, Dotum; color: rgb(127, 127, 127);"><span style="font-size: 12px;"><b></div></body></html></b></span></span></p><p><strong style="color: rgb(127, 127, 127); font-family: Arial, 돋움, Dotum; font-size: 12px;">
</strong></p><p><strong style="color: rgb(127, 127, 127); font-family: Arial, 돋움, Dotum; font-size: 12px;">
</strong></p><p><strong style="color: rgb(127, 127, 127); font-family: Arial, 돋움, Dotum; font-size: 12px;">
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
지금 말씀하신대로 하신다면 사진 갯수가 일정한 상황에서는 가능할지몰라도
사진 추가하고 땅겨오고 해서 노출하시려면 ajax을 사용하셔야 성능이 좋습니다 .
-----------
지금 말씀 주신대로하신다면
</strong> </p><p>var per = 5 ; // 한번에 노출 수량</p><p>var page = 1 ;</p><p>
</p><p>function showCard(pg){ // pg 는 페이지를 뜻합니다. </p><p style="word-break: break-all; color: rgb(72, 72, 72); font-family: Arial, 돋움, Dotum; font-size: 14.004px; margin-left: 40px;">$(".grid").show();</p><p style="word-break: break-all; color: rgb(72, 72, 72); font-family: Arial, 돋움, Dotum; font-size: 14.004px; margin-left: 40px;">var from = <span style="font-size: 14.6667px; font-family: 돋움;">pg -1 ;</span></p><p style="word-break: break-all; color: rgb(72, 72, 72); font-family: Arial, 돋움, Dotum; font-size: 14.004px; margin-left: 40px;">for(var i = <span style="font-size: 14.004px;">from </span>; i< <span style="color: rgb(0, 0, 0); font-family: 돋움; font-size: 14.6667px;">per </span>; i++) {</p><p style="word-break: break-all; color: rgb(72, 72, 72); font-family: Arial, 돋움, Dotum; font-size: 14.004px; margin-left: 40px;"> $('.card').eq(i).show();</p><p style="word-break: break-all; color: rgb(72, 72, 72); font-family: Arial, 돋움, Dotum; font-size: 14.004px; margin-left: 40px;">}</p><p><span style="font-size: 11pt;">}</span> </p><p>
</p><p style="word-break: break-all; color: rgb(72, 72, 72); font-family: Arial, 돋움, Dotum; font-size: 14.004px;">class="open" onClick="showCard(1)" // 추가해주시구요.</p><p style="word-break: break-all; color: rgb(72, 72, 72); font-family: Arial, 돋움, Dotum; font-size: 14.004px;">화살표에는 그때그때 jquery 를 활용해서 (pg) <-수를 바꿔주시면 될것같아요.</p><p style="word-break: break-all; color: rgb(72, 72, 72); font-family: Arial, 돋움, Dotum; font-size: 14.004px;">
</p><p style="word-break: break-all; color: rgb(72, 72, 72); font-family: Arial, 돋움, Dotum; font-size: 14.004px;"><strong style="color: rgb(127, 127, 127); font-size: 12px;">
답변에 대한 댓글 1개
올려주신 스크립트를 어디에 붙여야 하는건지 잘모르겠내용... 바꿔봤는데 스크립트가 틀어질뿐이라;; 죄송해요..
일정한갯수여도 괜찮습니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인