Question

如果有人能告诉我如何为html幻灯片显示自动化列表/序列/数组，我将非常感激。我想要显示＆＃34; 001.gif＆＃34;通过＆＃34; 1869.gif＆＃34;显然，如果有办法自动生成它，它会节省很多时间：

<img src="001.gif" width="640" height="480" />
<img src="002.gif" width="640" height="480" />
<img src="003.gif" width="640" height="480" />

一直到＆＃34; 1869.gif＆＃34;

<img src="1869.gif" width="640" height="480" />

注意：我有一个我喜欢的幻灯片脚本。工作完美。我到了＆＃34; 050.gif＆＃34;并决定在没有逐个输入的情况下询问是否有办法做到这一点。感谢。

Answer 1

$(document).ready(function(){

   function pad (str, max) {
     str = str.toString();
     return str.length < max ? pad("0" + str, max) : str;
   }

   for(i=1;i < 1870;i++){
     var $image = "<img src='"+pad(i, 3)+".gif' width='640' height='480'/>";
     $("body").append($image);
   }

});

将其添加到页面末尾（标签中）或单独的JS文件中。改变＆＃34;身体＆＃34;到您要添加图像的位置，这可能是您用于jQuery.cycle幻灯片的容器。

这将遍历1到1869之间的每个数字，并为每个数字添加一个图像。＆＃34;垫＆＃34;函数在数字前添加零 - 如果您需要更多信息，我从Adding extra zeros in front of a number using jQuery?

获取代码

Answer 2

由于您不等待加载任何其他内容，因此您可以立即创建内容。

首先使用pad方法扩展Number：

Number.prototype.pad = function(size) {
      var s = String(this);
      if(typeof(size) !== "number"){size = 2;}

      while (s.length < size) {s = "0" + s;}
      return s;
    }

然后在将输出添加到页面之前缓存输出，或者为您添加的每个元素重新绘制。

var suffix = ".gif";
var container = document.createElement("div");
for(i=1;i < 1870;i++){
    var img = document.createElement("img");
    img.width = 640;
    img.height = 480;
    img.src = i.pad(3) + suffix;
    container.appendChild(img);
}
document.body.appendChild(container);

如何为html幻灯片创建一个升序的文本/数字序列

2 个答案: