제이쿼리 슬라이드
본문
이곳에 제이쿼리 관련질문을 올려도 되는지 모르겠네요...
초자가 나름대로 공부해서 하려니 많이 부족하다보니 며칠을 끙끙대다가 평상시에 이곳에서 많이 도움을 받아서 혹시나 해서 올려봅니다.
슬라이드효과를 주어서 좌우버튼을 만든건데요,
이상하게 오른쪽으로 가는건 잘 가지는데 왼쪽버튼을 누르면 이미지를 제대로 보이긴 하는데 자연스럽게 슬라이드 되는게 아니고 끊겼다 나옵니다.(아무것도 없는 빈부분)
아무리 이것저것을 수정해봐도 도대체 해결이 안되어서 올려봅니다.
결과물은 아래 주소로 보시면 되구요
http://www.webd.kr/up/visual/page/slide4_side_button.html
혹 제이쿼리를 잘 아시는분이 계시다면 좀 도와주세요 ㅜㅜ
=========================================================================
<!doctype html>
</html>
<meta charset="utf-8">
<title>슬라이드+좌우버튼</title>
<link rel="stylesheet" href="../css/slide4_side_button.css">
</head>
<body>
<div class="visual clear">
<div class="visual_in clear">
<ul class="visual_box clear"> <!-- 이미지 -->
<li class="visual0"><a href="#"><img src="../image/sm0.jpg" alt="이미지1"></a></li>
<li class="visual1"><a href="#"><img src="../image/sm1.jpg" alt="이미지2"></a></li>
<li class="visual2"><a href="#"><img src="../image/sm2.jpg" alt="이미지3"></a></li>
<li class="visual3"><a href="#"><img src="../image/sm3.jpg" alt="이미지4"></a></li>
<li class="visual4"><a href="#"><img src="../image/sm4.jpg" alt="이미지5"></a></li>
</ul>
<div class="v_btnbox2"> <!-- 좌우버튼 -->
<span class="prevbtn"><span class="indent">이전 그림보기</span></span>
<span class="nextbtn"><span class="indent">다음 그림보기</span></span>
</div>
</div>
</div>
<!--제이쿼리 라이브러리선언 -->
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../js/slide4_side_button.js"></script>
</body>
</html>
==================================================================
@import url(common.css);
background : #DDDCDB;
}
.indent {
display : inline-block;
text-indent : -9999px;
}
/*-----------------비주얼------------*/
.visual .visual_in {
position : relative;
width : 800px; /*이미지의 가로크기 */
height : 400px; /* 이미지의 세로크기 */
border-radius : 10px;
border : solid 1px #bbb;
overflow : hidden;
}
.visual .visual_in .visual_box {
width : 4000px; /* 이미지가로크기 × 이미지개수 */
height : 400px;
border-radius : 10px;
/*margin-left : -800px;*/
}
.visual .visual_in .visual_box>li{
float : left; /* 이미지5개 정렬 가로로 */
margin : 0 auto;
width : 800px;
height : 400px;
border-radius : 10px;
}
.visual .visual_in .visual_box>li a{
width : 800px;
height : 400px;
border-radius : 10px;
}
/* 좌우버튼 위치 */
.visual .visual_in .v_btnbox2 {
position :absolute;
top : 50%;
left : 50%;
margin-left : -400px;
margin-top : -24px;
width : 800px;
}
.visual .visual_in .v_btnbox2>span {
position : absolute;
display : block;
width : 48px;
height : 48px;
cursor : pointer;
}
.visual .visual_in .v_btnbox2 .prevbtn{
left : 20px;
background : url(../image/vbtn_left.png) no-repeat; /* 이전보기 */
}
.visual .visual_in .v_btnbox2 .nextbtn{
right : 20px;
background : url(../image/vbtn_right.png) no-repeat; /* 다음보기 */
}
===================================================================
num = 0;
chk = true;
function visual(){
num++;
if(num==5){
num=0;
}
$(".visual_box").stop(true,true).animate({"margin-left":"-=800px"},1000,function(){
$(this).find("li").eq(0).appendTo($(this));
$(this).css({"margin-left":"0"});
/*
$(this).append($(".visual_box li").first());
$(this).css({"margin-left":"0"});
old=num;*/
});
};
$(document).ready(function(){
auto=setInterval("visual()",3000); //자동화
/* 다음보기 */
$(".v_btnbox2 .nextbtn").click(function(){
if(chk){
chk=false;
num++;
if(num==5){
num=0;
}
clearInterval(auto);
auto=setInterval("visual()",7000);
$(".visual_box").stop(true,true).animate({"margin-left":"-=800px"},500,function(){
/*
$(this).find("li").eq(0).appendTo($(this));
$(this).css({"margin-left":"0"});*/
$(this).append($(".visual_box li").first());
$(this).css({"margin-left":"0px"});
old=num;
chk=true;
});
}
});
/* 이전보기 */
$(".v_btnbox2 .prevbtn").click(function(){
if(chk){
chk=false;
num--;
if(num==-1){
num=4;
}
clearInterval(auto);
auto=setInterval("visual()",7000);
$(".visual_box").stop(true,true).animate({"margin-left":"+=800px"},500,function(){
/*
$(this).find("li").eq(4).prependTo($(this));
$(this).css({"margin-left":"0"});*/
$(this).prepend($(".visual_box li").last());
$(this).css({"margin-left":"0"});
old=num;
chk=true;
});
}
});
});
