저번에 했던 배너이동을 애니메이션을 이용하여 부드럽게 표시해보자
좌표 설정하는 부분을 애니메이션부븐으로 바꿔주기만하면 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>메뉴 이동하기</title>
<style>
div.banner {
margin-top: 10px;
width: 260px;
height: 166px;
border: 1px solid black;
position: relative;
overflow: hidden;
}
.banner-container {
width: 2080;
position: absolute;
left: 0;
top: 0;
}
div.banner-container img{
display: block;
float: left;
left: 0;
top: 0;
width: 260px;
}
</style>
<script src="../../js/jquery-3.5.1.min.js"></script>
<script src="../../js/jquery.easing.1.3.js"></script>
<script>
var current_index = 0;
$(document).ready(function () {
var $prev = $("#prev"); // 이전 버튼의 변수 저장
var $next = $("#next"); // 다음 버튼의 변수 저장
var $banners = $("div.banner .banner-container img"); // 배너 이미지 목록 저장
var $banner_container = $(".banner-container"); // 배너 전체 이미지
var banner_width = $banners.eq(0).width(); // 배너 이미지 하나의 폭
$prev.click(function () {
current_index--;
if(current_index <= 0){
current_index = $banner_container.length - 1;
}
showImage(current_index);
});
$("#next").click(function () {
++current_index;
if(current_index >= $banners.length){
current_index = 0;
}
showImage(current_index);
});
function showImage(index){
$banner_container.animate({left: -(index*banner_width)}, 3000, "easeInOutBack");
}
}
);
</script>
</head>
<body>
<div class="wrap">
<button id="prev">이전</button>
<button id="next">다음</button>
<div class="banner">
<div class="banner-container">
<img src="../../images/1.png" class="select">
<img src="../../images/2.png">
<img src="../../images/3.png">
<img src="../../images/4.png">
<img src="../../images/5.png">
<img src="../../images/6.png">
<img src="../../images/7.png">
<img src="../../images/8.png">
</div>
</div>
</div>
</body>
</html>
728x90
반응형
'HTML > Javascript 기초' 카테고리의 다른 글
| [Javascript] 지정한 위치로 물고기 이동시키기(애니메이션 사용하기) (0) | 2020.08.07 |
|---|---|
| [Javascript] 애니메이션 사용하기(사용자 제어) (0) | 2020.08.07 |
| [Javascript] 애니메이션 사용하기(animate option) (0) | 2020.08.07 |
| [Javascript] 애니메이션 사용하기(slideDown, slideUp) (0) | 2020.08.07 |
| [Javascript] 애니메이션 사용하기(fadeIn, fadeOut) (0) | 2020.08.07 |
