버튼 클릭으로 배너를 이동해보자.
배너를 여러개를 한 줄로 나열한 다음
전체를 움직여서 제한된 공간에 배너를 보여주는 코딩을 해보자.
<!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>
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){
// (1) "left" 속성을 이용한 방법
$banner_container.css("left", -(index*banner_width));
}
}
);
</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.06 |
| [Javascript] 윈도우 창 크기 변경하고 이동하기 (0) | 2020.08.06 |
| [Javascript] 스크롤 위치 구하기 (0) | 2020.08.06 |
| [Javascript] 윈도우 창 크기 구하기 (0) | 2020.08.06 |
