[송규남의 IT다이어리] 제이쿼리(jQuery) 일곱번째 이야기
노용철
view : 621
[송규남의 IT다이어리] 제이쿼리(jQuery) 시작해보기 7
안녕하세요. 중앙HTA의 송규남 강사입니다.
지난시간에 이어 jQuery 일곱번째 강좌를 시작해보겠습니다 ^^
지난 제이쿼리 강의에서는 jQuery에서 이펙트 효과를 낼 수 있는 animate() 메소드에 대해서 알아봤는데요
이번 시간에는 animate() 메소드를 활용한 이미지 슬라이드 기능을 구현하는 예제를 만들어 보도록 하겠습니다!!
전체 이미지 7개가 왼쪽 방향으로 이동하는 예제인데요~
먼저 아래와 같은 html 코드를 작성합니다.
<html>
<head>
<meta http-equiv="Content - Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="posterbox">
<div id="parent">
<div id="imgslide">
<ul>
<li><img src="images/002.jpg"/></li>
<li><img src="images/003.jpg"/></li>
<li><img src="images/004.jpg"/></li>
<li><img src="images/005.jpg"/></li>
<li><img src="images/006.jpg"/></li>
<li><img src="images/007.jpg"/></li>
<li><img src="images/008.jpg"/></li>
</ul>
</div>
</div>
</div>
</body>
</html>
#imgslide에는 7개의 이미지가 들어있습니다. 부모 div인 #parent는 5개의 이미지가 보일 크기를 설정하고 영역을 벗어나는 자식요소는
overflow:hidden 속성을 주어서 숨깁니다. 그래야만 이미지가 이동하는 것처럼 보일 수 있습니다.
아래와 같은 CSS를 추가합니다.
<style type="text/css">
*{margin:0;padding:0}
#posterbox{margin-left: 200px;margin-top: 30px;}
/ * parent는 이미지 5개가 담길 크기 */
#parent{width:700px;height:200px;
overflow: hidden;/* 자신의 영역을 벗어나면 감춰라. */
position: relative;
background-color: orange;border:5px solid green;}
/* imgslide(자식div)는 이미지 7개가 담길 크기*/
#imgslide{width:980px;height:200px;position:absolute;left:0px;}
#imgslide ul li{list-style-type: none;float:left;}
#imgslide ul li img{width:136px;height:196px;margin:2px}
</style>
위의 CSS가 적용된 화면은 아래와 같습니다.
여기에 jQuery 코드를 추가하여 슬라이드로 이동되도록 해보겠습니다.
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//1초에 한번씩 function을 반복적으로 수행한다.
setInterval(function(){
$("#imgslide").animate({
'left':'-=140px' //현재 left에서 140px 뺀 위치로 이동
},1000,function(){//1초간 animate 수행하고 function 수행
//현재 left 속성값 얻어오기
var left=parseInt($("#imgslide").css('left'));
//현재 left가 980인 경우 (왼쪽으로 이미지가 모두
//이동되어 안보이게 된 경우)
if(left<=-980){
//다시 오른쪽에서 나오게 하기
$("#imgslide").css('left','700px');
}
})
}, 100);
});
</script>
위의 코드를 작성 후 실행해 보면 이미지가 왼쪽으로 이동됩니다.
이때 왼쪽으로 쉴틈없이 이동하므로 왼쪽으로 이동한 후 0.5초간 멈춘 후 다시 이동되게 해보겠습니다.
아래처럼 delay() 메소드를 사용합니다.
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
setInterval(function(){
$("#imgslide").animate({
'left':'-=140px'
},1000,function(){
var left=parseInt($("imgslide").css('left'));
if(left<=-980){
$("imgslide").css('left','700px');
}
}).delay(500);//0.5초 지연하기
}, 1500);
});
</script>
위의 예제는 왼쪽으로 이미지가 모두 이동되어서 안보이게 되면 오른쪽에서 이미지가 나와 다시 왼쪽으로 이동하게 됩니다.
이때 뒤에 빈 공간이 보이게 됩니다.
이 부분이 끊기지 않고 계속 이미지가 흘러나오도록 하는 예제를 만들어 보겠습니다.
이번에는 10개의 이미지가 연속적으로 이동하는 예제입니다.
아래와 같은 html 태그를 작성합니다.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
</style>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div id="posterbox">
<div id="parent">
<div id="imgslide">
<ul>
<li><img src="images/slide1.png"/></li>
<li><img src="images/slide2.png"/></li>
<li><img src="images/slide3.png"/></li>
<li><img src="images/slide4.png"/></li>
<li><img src="images/slide5.png"/></li>
<li><img src="images/slide6.png"/></li>
<li><img src="images/slide7.png"/></li>
<li><img src="images/slide8.png"/></li>
<li><img src="images/slide9.png"/></li>
<li><img src="images/slide10.png"/></li>
</ul>
</div>
</div>
</div>
</body>
</html>
위의 코드에 아래와 같은 css를 추가합니다.
<style type="text/css">
*{margin:0;padding:0}
#posterbox{margin-left: 200px;margin-top: 30px;}
/* 부모 div는 이미지 5개 보일 크기*/
#parent{width:700px;height:200px;overflow: hidden;position:relative;
background-color: orange;border:5px solid green;}
/* 자식 div는 이미지 10개를 담을 크기*/
#imgslide{width:1400px;height:200px;}
#imgslide ul li{list-style-type: none;float:left;position:absolute;}
/* img는 margin을 포함해서 140px의 영역의 크기를 갖는다.*/
#imgslide ul li img{width:136px;height:196px;margin:2px;}
</style>
아래와 같은 jquery 코드를 추가합니다.
<script type="text/javascript">
$(document).ready(function(){
var pos=0'
//각각의 li들의 초기 좌표값 설정하기 (왼쪽부터 opx, 140px, 280px, … 순으로 //left 값이 설정됩니다.)
$("#imgslide ul li").each(function(){
$(this).css('left',pos+"px");
pos+ = 140;
});
//1초에 한번씩 function을 반복적으로 수행합니다.
setInterval(function(){
//imgslide ul li를 모두 1초에 한번씩 왼쪽으로 140px 이동
$("#imgslide ul li").each(function(){
var left-parseInt($(this).css('left'));
$(this).animate({'left':'-=140px'},1000,function(){
var left=parseInt($(this).css('left'));
//이동된 left 위치가 -700px이면 다시 오른쪽 700px의 위치로 이동하기
if(left<=-700){
$(this).css('left','700px');
}
});
}).delay(1000);
},2000);
});
</script>
실행해보면 아래처럼 이미지가 왼쪽으로 끊어지지 않고 계속 이동됨을 볼 수 있습니다.
여러분들도 다 잘따라오셨을 거라고 생각합니다~
막히는 부분이 있으면 다시 한번 살펴보면 될 것 같습니다^^
이번 강좌에서는 animate() 메소드를 활용한 이미지 슬라이드 기능을 구현해봤습니다.
이번 jQuery 강좌는 여기서 마무리하고 다음 제이쿼리 강좌로 찾아뵙도록 하겠습니다!!
저작권자(c)중앙에이치티에이(주). 무단전재-재배포금지>
