animate : 사용자 지정 효과를 생성함
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#region{
width: 200px;
height: 200px;
margin: auto;
overflow: hidden;
}
#images{
width: 600px;
height: 200px;
}
img{
width: 200px;
height: 200px;
}
#direaction{
width: 360px;
margin: auto;
}
.leftbtn{
margin-top: 10px;
}
.rightbtn{
margin-top: 10px;
margin-left: 300px;
}
</style>
<script src = ../js/jquery.js type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var i = -1;
$('.leftbtn').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 = "direaction">
<button class = "leftbtn">«</button>
<button class = "rightbtn">»</button>
</div>
</body>
</html>
실행결과
초기화면
<<클릭시
<<클릭시
<<클릭시
코드설명
line43 : 움직일 이미지를 가져오고 애니매이터를 이용해 -205px만큼 이동할수있게 설정하고 2초의 딜레이를 걸음
line51: 움직일 이미지를 가져오고 애니매이터를 이용해 205px만큼 이동할수있게 설정하고 2초의 딜레이를 걸음
if문의 경우 -1에서 움직일때마다 1씩올라가게해 2번움직이면 1이되는데 1이되고도 <<버튼을 누르면 alert가 뜨게했다
반대의 경우도 -1의 되면 alert가 뜨게 했다
«는 <<을 의미
»는 >>를 의미