자바스크립트를 이용하여 하나의 영역에서 순차적으로 바뀌거나, 슬라이드 배너를 만들 수 있다.
☆ Code
<!doctype html>
<html>
<head>
<title>banner</title>
<style>
.banner2 {
width: 4000px;
transition: transform 2s;
}
.img > img {
width: 800px;
float: left;
}
section.container {
width: 800px;
margin: 0 auto;
overflow: hidden;
}
</style>
</head>
<body>
<h1>Change Image</h1>
<hr>
<div class="banner1">
<img id="myCanvas" width="800px" height="450px">
</div>
<br>
<h1>Slide Image</h1>
<hr>
<section class="container">
<div class="banner2">
<div class="img"><img src="./images/slide01.jpg"></div>
<div class="img"><img src="./images/slide02.jfif"></div>
<div class="img"><img src="./images/slide03.jpg"></div>
<div class="img"><img src="./images/slide04.jpg"></div>
<div class="img"><img src="./images/slide05.webp"></div>
</div>
</section>
</body>
<script>
// 1. get image using DOM
const img = document.getElementById("myCanvas");
// 2. compose Pictures
var pics = new Array();
pics.push("slide01.jpg");
pics.push("slide02.jfif");
pics.push("slide03.jpg");
pics.push("slide04.jpg");
pics.push("slide05.webp");
// 3. set Interval
var count = 0;
setInterval(function(){
img.src = "./images/" + pics[count % pics.length];
count++;
}, 2000);
// 4. banner
const banner = document.getElementsByClassName("banner2")[0];
var count2 = 0;
setInterval(function(){
if(count2 == 4) count2 = 0;
else count2++;
banner.style.transform = "translate(-" + (count2*800) + "px)";
}, 4000);
</script>
</html>'JavaScript' 카테고리의 다른 글
| JS 카카오맵 API 사용하기 (0) | 2025.01.05 |
|---|---|
| JS 윈도우 함수 (0) | 2025.01.01 |
| JS dom (0) | 2024.12.03 |
| JS 콜백 (0) | 2024.12.02 |
| JS json (0) | 2024.12.01 |