자바스크립트 이미지 자동 변경 - jabaseukeulibteu imiji jadong byeongyeong

Question

티스토리 뷰

- 사진은 html파일과 같은 경로에 있어야 함

- 사진은 5초마다 바뀜

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <script type="text/javascript">
  var imgArray=new Array();
  imgArray[0]="1.jpg";
  imgArray[1]="2.jpg";
  imgArray[2]="3.jpg";
  imgArray[3]="4.jpg";

  function showImage(){
   var imgNum=Math.round(Math.random()*3);
   var objImg=document.getElementById("introimg");
   objImg.src=imgArray[imgNum];
   setTimeout(showImage,5000);
  }

 </script>
</head>
<body onload="showImage()">
 <img id="introimg" border="0">
</body>
</html>

<!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>