기 타 HTML 고수님에게 도움 요청 드립니다.
2023.09.13 16:46
쳇gpt로 아래와 같은 html코드를 얻어서
사진 3장을 전체화면으로 교대로 띄우는데는 성공했는데요.
여기에서 좀 더 나아가 그 JPG 파일들을 1시간 정도 간격으로
파일을 다시 읽어들여야 하는 기능이 필요합니다.(파일들이 수정되기 때문에)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지 교대로 전체 화면</title>
<style>
body {
margin: 0;
overflow: hidden;
}
img {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
animation: fade 1s infinite alternate;
}
@keyframes fade {
0% {
opacity: 50;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<img id="image" src="c:\a.jpg">
<script>
const images = ["c:\\a.jpg", "c:\\b.jpg","c:\\c.jpg"];
const imageElement = document.getElementById("image");
let currentIndex = 0;
function changeImage() {
currentIndex = (currentIndex + 1) % images.length;
imageElement.src = images[currentIndex];
}
setInterval(changeImage, 5000); // 5초마다 이미지 변경
</script>
</body>
</html>
능력자님들 도와 주세요.!!!
function changeImage() {
currentIndex = (currentIndex+1) % images.length;
let today = new Date() ;
tempt = today.getHours();
imageElement.src = images[currentIndex]+'?time='+tempt;
}
changeImage 함수를 바꾸면 시간이 바뀌면 불러오는 url 값이 변경되므로 다시 읽어올것으로 예상되는
단점은 편법으로 구현하다보니 시간 측정을 따로 하지 않아서 들어오는 순간에 따라 동작 시간이 달라짐...
5분에 들어오면 55분뒤에 바뀌고 55분에 들어오면 5분뒤에 바뀌고 그이후는 1시간마다...