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

このような画像のリストを動的に生成する方法は 2 つあります。

  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 に答える