세로형
Notice
Recent Posts
Recent Comments
Link
12-31 14:55
«   2024/12   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

꿈 많은 사람의 이야기

자바스크립트 이미지 슬라이드(javascript image slide) 본문

javascript

자바스크립트 이미지 슬라이드(javascript image slide)

이수진의 블로그 2017. 8. 22. 08:54
반응형
728x170
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
공유하기 링크
'javascript' Related Articles more
Comments