Question

我有一个图片滑块网页。在那里有许多图像标签。因此，每当我想在滑块中添加图像时，每次我都在html中添加标签。是否可以不添加图像标记。

<div id="slideshow" class="slideshow">


   <img src="images/1.jpeg" width="620" height="320" />
   <img src="images/2.jpeg" width="620" height="320" />
   <img src="images/3.jpeg" width="620" height="320" />
   <img src="images/4.jpeg" width="620" height="320" />

</div>

如果我想添加新图像，我必须添加新的img标签。是否可以在html中添加图像而不使用<img>

我尝试过使用jquery。我没有从文件夹中获取图像。

  $('<img />')
    .attr('src', 'images/')
    .appendTo('#div3')

我们如何解决这个问题？

Answer 1

我认为已经在Is there a way to return a list of all the image file names from a folder using only Javascript?

中完成了

$.ajax({
 url: "http://yoursite.com/images/",
  success: function(data){
    $(data).find("td > a").each(function(){
       // will loop through 
       alert("Found a file: " + $(this).attr("href"));
   });
 }
 });

Answer 2

使用jQuery库。

您可以使用以下内容：

$("#slideshow").append("<img src=\"images/5.jpeg\" />")

或以下（更好的可读性）

var newImg = $("<img />").attr("src","images/5.jpeg").css({"width":"620px","height":"320px"})
$("#slideshow").append(newImg);

现在要动态检索目录中图像的文件列表，您将需要某种服务器端语言（php，ruby，python，c＃，nodejs等），因为Javascript无法访问服务器的文件系统。如果没有服务器端语言，您可以查看创建JSON或XML文件，然后由Javascript读取，这样您就不会更改html，而是快速添加新项目。

{"images": [
  {"src" : "images/5.jpeg",
   "css": {
         "width" : "620px",
         "height" : "320px"
    }
  }, {
   "src" : "images/6.jpeg",
   "css": {
         "width" : "620px",
         "height" : "320px"
  }
]}

然后执行以下操作以检索您创建的json文件：

$.getJSON("images.json",function(data){
  $.each(data,function(i,image){
    var newImg = $("<img />").attr("src",image.src).css(image.css);
    $("#slideshow").append(newImg);
  });
});

这是未经测试的代码，可以使用一些调整来实现。

资源也可以查看以获取更多信息。

stackoverflow：jquery loop on Json data using $.each

jquery-api：http://api.jquery.com/jquery.getjson/

如何从没有服务器的目录中提取图像

2 个答案: