|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<!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> |
반응형
그리드형
'javascript' 카테고리의 다른 글
| 자바스크립트 배열 (0) | 2017.08.22 |
|---|---|
| 자바스크립트 날짜, 유닉스 (0) | 2017.08.22 |
| 자바스크립트 구구단 출력해보기 (0) | 2017.08.22 |
| 자바스크립트 마우스 클릭(click), out, 오버(over)시 색상 변경 (0) | 2017.08.21 |
| 자바스크립트 마우스 오버시 이미지 변경(javascript onmouseover) (0) | 2017.08.21 |
