티스토리 뷰
- 사진은 html파일과 같은 경로에 있어야 함
- 사진은 5초마다 바뀜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script>
var index = 0; //이미지에 접근하는 인덱스
window.onload = function(){
slideShow();
}
function slideShow() {
var i;
var x = document.getElementsByClassName("slide1"); //slide1에 대한 dom 참조
for (i = 0; i < x.length; i++) {
x[i].style.display = "none"; //처음에 전부 display를 none으로 한다.
}
index++;
if (index > x.length) {
index = 1; //인덱스가 초과되면 1로 변경
}
x[index-1].style.display = "block"; //해당 인덱스는 block으로
setTimeout(slideShow, 4000); //함수를 4초마다 호출
}
</script>
<body>
<div>
<img class="slide1" src="../images/1.PNG" >
<img class="slide1" src="../images/2.PNG">
<img class="slide1" src="../images/3.PNG">
</div>
</body>
</html>