안녕하세요. 오늘은 Javascript 를 이용하여 5초 마다 배너가 변경되도록 만들어 보겠습니다.
다음은 index.html 코드 입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Banner Carousel</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
#banner {
background-color: #3498db;
color: #fff;
text-align: center;
padding: 10px;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
}
</style>
</head>
<body>
<!-- Your page content goes here -->
<script>
var banner = document.createElement("div");
banner.id = "banner";
document.body.appendChild(banner);
var messages = [
"팀노바 & Stickode 개발자 블로그",
"안녕하세요.",
"반갑습니다."
];
var currentMessageIndex = 0;
function updateBanner() {
banner.innerHTML = messages[currentMessageIndex];
}
function nextMessage() {
currentMessageIndex = (currentMessageIndex + 1) % messages.length;
updateBanner();
}
setInterval(nextMessage, 5000);
updateBanner();
</script>
</body>
</html>
위와 같이 코드를 작성하면 다음과 같은 결과를 확인 할 수 있습니다.
'JavaScript' 카테고리의 다른 글
| [Javascript] FAQ 페이지 만들기 (2) | 2024.04.28 |
|---|---|
| [Javascript] 모달 만들기 (0) | 2024.04.19 |
| [Javascript] 마우스 오버 텍스트 색상 변경 (0) | 2024.04.11 |
| [JavaScript] Sidebar 만들기 (0) | 2024.04.10 |
| [Javascript] chart.js 를 사용하여 선 그래프 그리기 (0) | 2024.04.09 |
