[JavaScript - (4) ] 이미지 슬라이드(몇초마다 이미지 변경)
<!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>
'◽ HTML & CSS & JS, jQuery' 카테고리의 다른 글
| <label> - onclick 시 id값에 커서 이동. (0) | 2019.06.10 |
|---|---|
| <div> 기본적으로 활용하는 속성 정리 (0) | 2019.06.09 |
| [HTML&CSS] 태그(Tag), 요소(Element), 속성(Attribute) 정의 (0) | 2019.06.09 |
| [JavaScript - (3) ] 특정 URL 페이지로 가기 - "window.location.href" (0) | 2019.05.12 |
| [JavaScript - (2) ] 페이지 이동 정리 (0) | 2019.05.12 |
| [JavaScript - (1) ] javascript 정의. (0) | 2019.05.08 |
| html 기본 구조 (0) | 2019.04.23 |