Link
09-25 13:23
«   2020/09   »
    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      
Archives
Today
939
Total
1,023,685
관리 메뉴

꿈 많은 사람의 이야기

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

javascript

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

이수진의 블로그 이수진의 블로그 2017. 8. 22. 08:54
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>
 


0 Comments
댓글쓰기 폼