전역변수 스크립트
본문
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일때
5~9일때는 뭐 전역변수 x라고 치면
x==2일때
이렇게 짜고싶습니다.. 스크립트가 미숙한지라 짜기가 너무 어렵습니다. 도와주세요
답변 2
다시 해서 올립니다.
한번 애니메이션이 진행되면 두번째 호출시 애니메이션이 안되는데 이건 플러그인을 확인하셔아할듯 합니다.
도움이 되셨길 바랍니다.
<html><head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="http://jisu.webnain.com/naver/css/mu.css">
<style type="text/css">
html,body {margin:0;padding:0;height:100%;font-family: 'NanumGothic', sans-serif;width:100%}
a {text-decoration: none;}
img {border-style:none;}
ul{list-style: none;}
body {letter-spacing:0.05em;font-size:13px;background:url("http://jisu.webnain.com/naver/img/bg.jpg");background-repeat: no-repeat;background-size: cover; box-sizing: border-box;height:100%}
* {padding:0;margin:0;}
.cf:after{ display: block; clear: both;}
#center {width:777px;margin:0 auto;text-align:Center;height:697px;}
#center .clock {color:#fff;overflow:hidden;width:100%; height:165px; line-height:164px; color:#666;font-size:164px; text-align:center;font-weight:500;}
#center b {color:#fff;overflow:hidden;width:100%; height:54px;font-size:40px; text-align:left;font-weight:600}
#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;}
input:focus { outline: none;}
#center .cen {position:Absolute;left:0;top:0;bottom:0;margin-top:auto;margin-bottom:auto;width:100%;height:300px;}
input::-webkit-input-placeholder { color: #fff; }
.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}
.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;}
#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;}
</style>
</head>
<body data-vide-bg="/SRC2/fullvideo/examples/video/ocean">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/SRC2/fullvideo/dist/jquery.vide.min.js"></script>
<div id="warp">
<div class="grid" style="display: none;">
<div class="back_color">
<button style="position:fixed;border:none;right:60px;top:80px" class="close" ></button>
<ul class="list">
<li class="card" style="display: none;"><img src="http://jisu.webnain.com/naver/img/bg.jpg" alt=""></li>
<li class="card" style="display: none;"><img src="http://jisu.webnain.com/naver/img/bg2.jpg" alt=""></li>
<li class="card" style="display: none;"><img src="http://jisu.webnain.com/naver/img/bg3.jpg" alt=""></li>
<li class="card" style="display: none;"><img src="http://jisu.webnain.com/naver/img/bg4.jpg" alt=""></li>
<li class="card" style="display: none;"><img src="http://jisu.webnain.com/naver/img/bg.jpg" alt=""></li>
<li class="card" style="display: none;"><img src="http://jisu.webnain.com/naver/img/bg.jpg" alt=""></li>
<li class="card" style="display: none;"><img src="http://jisu.webnain.com/naver/img/bg2.jpg" alt=""></li>
<li class="card" style="display: none;"><img src="http://jisu.webnain.com/naver/img/bg3.jpg" alt=""></li>
<li class="card" style="display: none;"><img src="http://jisu.webnain.com/naver/img/bg4.jpg" alt=""></li>
<li class="card" style="display: none;"><img src="http://jisu.webnain.com/naver/img/bg.jpg" alt=""></li>
<li class="card" style="display: none;"><img src="http://jisu.webnain.com/naver/img/bg4.jpg" alt=""></li>
<li class="card" style="display: none;"><img src="http://jisu.webnain.com/naver/img/bg.jpg" alt=""></li>
<li class="card" style="display: none;"><img src="http://jisu.webnain.com/naver/img/bg2.jpg" alt=""></li>
<li class="card" style="display: none;"><img src="http://jisu.webnain.com/naver/img/bg4.jpg" alt=""></li>
<li class="card" style="display: none;"><img src="http://jisu.webnain.com/naver/img/bg.jpg" alt=""></li>
</ul>
</div>
<button style="position:fixed;border:none;right:900px;top:50px" class="left"></button>
<button style="position:fixed;border:none;right:900px;bottom:50px" class="right"></button>
</div>
<div id="footer">
<div style="float:right;z-index:10">
<button style="width: 100px;height: 25px; background-color: #fff; border: 5px double #448288; line-height: 1px;" class="open" page="0" >펼치기</button>
</div>
</div>
<script>
var per = 5 ;
$('.close').click(function() {
$(".card").hide();
$(".grid").hide();
});
$('.open').click(function() {
$(".grid").show();
listing();
});
$('.right').click(function() {
if($('.open').attr("page") == 2){
alert("No More Data");
}else{
$('.open').attr("page",$('.open').attr("page")*1+1);
listing();
}
});
$('.left').click(function() {
if($('.open').attr("page") == 0){
alert("No More Data");
}else{
$('.open').attr("page",$('.open').attr("page")*1-1);
listing();
}
});
function listing(){
$('.card').hide();
$('.card').attr("class","card");
for(var i=($('.open').attr("page")*per); i<($('.open').attr("page")*per+per); i++) {
$('.card').eq(i).show();
$(".card").eq(i).attr("class", "card ani" + i);
}
}
</script>
</div></body></html>
존경합니다.
지금 말씀하신대로 하신다면 사진 갯수가 일정한 상황에서는 가능할지몰라도
사진 추가하고 땅겨오고 해서 노출하시려면 ajax을 사용하셔야 성능이 좋습니다 .
-----------
지금 말씀 주신대로하신다면
var per = 5 ; // 한번에 노출 수량
var page = 1 ;
function showCard(pg){ // pg 는 페이지를 뜻합니다.
$(".grid").show();
var from = pg -1 ;
for(var i = from ; i< per ; i++) {
$('.card').eq(i).show();
}
}
class="open" onClick="showCard(1)" // 추가해주시구요.
화살표에는 그때그때 jquery 를 활용해서 (pg) <-수를 바꿔주시면 될것같아요.
답변정말감사합니다. left랑right버튼눌러서 카드가 바뀌는건데..제가이해를 잘못하는건지 잘 모르겠내요;; 계수나오는건 제가 위에올린거처럼 해결했습니다.
올려주신 스크립트를 어디에 붙여야 하는건지 잘모르겠내용... 바꿔봤는데 스크립트가 틀어질뿐이라;; 죄송해요..
일정한갯수여도 괜찮습니다.
답변을 작성하시기 전에 로그인 해주세요.
