전역변수 스크립트

전역변수 스크립트

QA

전역변수 스크립트

본문

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버튼눌러서 카드가 바뀌는건데..제가이해를 잘못하는건지 잘 모르겠내요;; 계수나오는건 제가 위에올린거처럼 해결했습니다.
올려주신 스크립트를 어디에 붙여야 하는건지 잘모르겠내용... 바꿔봤는데 스크립트가 틀어질뿐이라;; 죄송해요..
일정한갯수여도 괜찮습니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 3

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT