수를 계산하는 방법. 자바 스크립트를 사용하는 로컬 폴더에있는 이미지 파일들

Question

나는 JavaScript에 익숙하지 않고 간단한 웹 디자인을 시도하고있다. js 코드를 사용하여 로컬 이미지 폴더에 저장된 이미지 파일을 가져 오는 방법을 의심 스럽습니다.

나는 아니오를 얻고 싶다. 이미지 파일을 동적으로 저장하므로 언제든지 웹 페이지에 표시되는 더 많은 이미지를 폴더에 추가 할 수 있습니다.

function parenting { 
    var n=3; 
    for(var i=1; i<=n; i++) { 
    var img1 = document.createElement('img'); 
    img1.src = 'images/parenting/'+i+'.jpg'; 
    document.body.appendChild(img1); 
    } 
} 

위의 코드에서 n = 3을 기본 번호로 지정했습니다. 이미지 파일은 이미지 폴더에서 가져와야하지만 코드별로 이미지 폴더에서 가져와야합니다.

Answer 1

당신이 당신의 이미지 위치에 대한 웹 서버에 디렉터리 검색을 사용하는 경우, 당신은 아약스 요청을하고 결과를 반복 할 수 있습니다 여기에

$.ajax({ 
    url: "images/parenting/", 
    success: function(data){ 
    $(data).find("a:contains(.jpg)").each(function(){ 
     var filename = this.href.replace(window.location.host, "").replace("http://", ""); 
     $("body").append("<img src='images/parenting/" + filename + "'>"); 
    }); 
    } 
}); 

은 바닐라의 자바 스크립트 답 :

var xmlhttp = new XMLHttpRequest(); 

xmlhttp.onreadystatechange = function() { 
    if (xmlhttp.readyState == XMLHttpRequest.DONE) { 
    if (xmlhttp.status == 200) { 
     var n = (xmlhttp.responseText.match(/jpg/g) || []).length; 

     for (var i = 1; i <= n; i++) { 
     var img1 = document.createElement('img'); 
     img1.src = 'images/parenting/' + i + '.jpg'; 
     document.body.appendChild(img1); 
     } 
    } 
    } 
}; 

xmlhttp.open("GET", "images/parenting/", true); 
xmlhttp.send();