자바 스크립트 루프 이미지 슬라이드 쇼

Question

var imag = document.getElementById('contentimage'); 
      var imagarr = ["images/contimgtwo.jpg","images/contimg.jpg"] 
      //var convertimg = imagarr[i].toString(); 
      var runtext = function(){ 
       for (i=0;i<imagarr.length;i++){ 

       imag.src=imagarr[i]; 
       } 
      } 
     setTimeout(runtext,5000); 

CSS :

#contentimage { 
    display:block; 
    top:1600px; 
    width:500px; 
    height:400px; 
    position:absolute; 
} 

    #contentimage:hover { 
     opacity:0.5; 
     cursor:crosshair; 
    } 

나는 그것이 이미지 경로로하려면 .src 경로를 제공 할 것 for 루프는, 아이디어가 사용하여 이미지 슬라이드 쇼를 만들려고 해요 그러나 문제는 .src = ""메서드를 사용하여 배열을 호출 할 수 없으므로이 이미지를 찾지 못합니다. "

Answer 1

runtext 함수에서 전체 배열을 반복해서는 안됩니다. 실제로 배열의 마지막 값만 적용하고 항상 마지막 이미지가 표시됩니다.

var imag = document.getElementById('contentimage'); 
var imagarr = ["images/contimgtwo.jpg", "images/contimg.jpg"]; 
var index = 0, interval; 
var runtext = function(){ 
    imag.src = imagarr[index]; 
    if(index < imagarr.length-1) { 
     index += 1; 
    } else { 
     index = 0; 
    } 
    interval = setTimeout(runtext, 5000); 
} 
var stopText = function() { 
    clearTimeout(interval); 
} 
interval = setTimeout(runtext, 5000); 

내가 슬라이드 쇼를 중지하는 기능을 추가 : 여기에 작동 할 수 스크립트의 수정이다. 배열의 모든 요소를 ​​계속 검토하지만 인덱스는 runtext 호출마다 증가합니다.