1

我有一个照片库，图像的名称从 0 到 170，我像这样插入它们：

         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

        <!-- load Galleria -->
        <script src="galleria-1.2.7.min.js"></script>

    </head>
<body>
    <div class="content">
        <h1>Galleria Classic Theme</h1>
        <p>Demonstrating a basic gallery example.</p>

        <!-- Adding gallery images. We use resized thumbnails here for better performance, but it’s not necessary -->

        <div id="galleria">
            <a href="images/0.jpg">
                <img src="images/0.jpg">
            </a>
           <a href="images/1.JPG">
                <img src="images/1.JPG">
            </a>
            <a href="images/2.JPG">
                <img src="images/2.JPG">
            </a>
           <a href="images/3.JPG">
                <img src="images/3.JPG">
            </a>
          <a href="images/4.JPG">
                <img src="images/4.JPG">
            </a>
           <a href="images/5.JPG">
                <img src="images/5.JPG">
            </a>
                  </div>

        <p class="cred">Made by <a href="http://galleria.aino.se">Galleria</a>.</p>
    </div>

    <script>

我可以使用不需要输入每张照片名称的方法吗？

4

2 回答 2

3

您应该在服务器上执行此操作，而不是在 JavaScript 中的客户端上。

但是，要回答您的问题，

   var escape_amount = 170, resHtml = '', ii;
   for (ii = 0; ii < escape_amount; ii++)
   {
      resHtml += '<a href="images/'+ii+'.jpg"><img src="images/'+ii+'"></a>';
   }
   $('#galleria').html(resHtml);
于 2012-04-19T01:17:03.720 回答
3

有两种方法可以动态生成此类图像列表

  1. 在服务器端，如果您可以动态生成 HTML，则可以使用您正在使用的任何服务器端语言/模板语言进行操作

  2. 在客户端，您可以动态插入图像节点，幸运的是 JavaScript 有一个 for 循环

例如

var galleria = $('#galleria')
for(var i=0;i<170;i++){
    var imgName = "images/"+i+".JPG"
    galleria.append('<a href="'+imgName+'"><img src="'+imgName+'"></a>')
}

客户端的好处是，在某些情况下，您可能会很懒惰，直到需要时才插入任何图像或插入所需的任何数量，从而加快页面加载时间。

于 2012-04-19T01:18:03.997 回答