📌 jQuery – .animate()를 활용한 이미지 슬라이드
jQuery의 .animate() 메서드를 사용하면 CSS 속성을 애니메이션 효과로 자연스럽게 변경할 수 있습니다.
이번 예제에서는 좌우 버튼 클릭 시 이미지가 슬라이드처럼 이동하는 기능을 구현했습니다.
✅ 핵심 기능
- 왼쪽 버튼 (.leftbtn)
- 이미지를 왼쪽으로 이동
- marginLeft 값을 감소시켜 화면에 다음 이미지를 보여줌
- 오른쪽 버튼 (.rightbtn)
- 이미지를 오른쪽으로 이동
- marginLeft 값을 증가시켜 이전 이미지를 보여줌
- 인덱스 변수 i
- 현재 이미지의 위치를 기록
- i == 1 → 마지막 이미지에 도달
- i == -1 → 첫 번째 이미지에 도달
✅ 코드 설명
$(function(){
i = -1; // 위치 인덱스 (처음 상태)
// 왼쪽 버튼 클릭 → 다음 이미지
$('.leftbtn').bind('click', function(){
if(i == 1){ // 마지막 이미지면
alert('마지막 이미지 입니다.');
return;
}
$('#firstimage').animate({marginLeft:'-=205px'}, 2000);
i++; // 인덱스 증가
});
// 오른쪽 버튼 클릭 → 이전 이미지
$('.rightbtn').click(function(){
if(i == -1){ // 첫 번째 이미지면
alert('첫번째 이미지 입니다.');
return;
}
$('#firstimage').animate({marginLeft:'+=205px'}, 2000);
i--; // 인덱스 감소
});
});✅ 주요 포인트
- .animate({속성: 값}, 시간)
→ 특정 속성을 지정한 시간(ms) 동안 애니메이션 효과로 변경 - marginLeft:'-=205px'
→ 현재 margin-left에서 205px만큼 왼쪽으로 이동 - marginLeft:'+=205px'
→ 현재 margin-left에서 205px만큼 오른쪽으로 이동
✅ 전체 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ex07_animate.html</title>
<style>
#region {
width: 200px; height:200px;
overflow:hidden; margin:auto;
}
#images{
width: 600px; height: 200px;
}
#images a img {
width:200px; height:200px;
}
#direction {
width: 360px; margin:auto;
}
.leftbtn{margin-top:10px;}
.rightbtn{margin-left:290px; margin-top:10px;}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function(){
i = -1;
$('.leftbtn').bind('click', function(){
if(i==1){
alert('마지막 이미지 입니다.');
return;
}
$('#firstimage').animate({marginLeft:'-=205px'}, 2000);
i++;
});
$('.rightbtn').click(function(){
if(i==-1){
alert('첫번째 이미지 입니다.');
return;
}
$('#firstimage').animate({marginLeft:'+=205px'}, 2000);
i--;
});
});
</script>
</head>
<body>
<div id="region">
<div id="images">
<a href="#"><img src="../images/b.jpg" id="firstimage" /></a>
<a href="#"><img src="../images/c.jpg" id="secondimage" /></a>
<a href="#"><img src="../images/d.jpg" id="thirdimage" /></a>
</div>
</div>
<div id="direction">
<button class="leftbtn">«</button>
<button class="rightbtn">»</button>
</div>
</body>
</html>📝 정리
- .animate()는 CSS 속성을 부드럽게 변경할 수 있는 메서드.
- += / -=를 사용하면 현재 값 기준으로 이동 가능.
- 인덱스 변수를 활용하면 첫 번째/마지막 이미지 제한 처리 가능.
'기초 및 언어 > ▶ JavaScript&JQuery' 카테고리의 다른 글
| 12. JQuery _ ajax 예제 (0) | 2025.09.09 |
|---|---|
| 11. JQuery _ .magify(); 확대 (0) | 2025.09.09 |
| 09. jQuery_ .show() 와 .hide() 사용 (1) | 2025.09.09 |
| 08. jQuery_change() (1) | 2025.09.09 |
| 07. jQuery_bind() (1) | 2025.09.09 |