Javascript - 将照片中的图像显示为唯一的<div></div><div id="text_translate"><p>我已经在这个网站上搜索了几天寻找解决方案。 我想使用 javascript 从我服务器上的文件夹中获取图像并将它们放入这样的集合中。 我认为这会相当简单，但我什么也没想到。</p><p> 它将取代此代码中部分标记之间的下面的 div。</p><p> 我可以对它们全部进行硬编码，但是我需要在这个轮播中显示 107 张图像，从长远来看，能够从文件夹中添加/删除图像比硬编码要容易得多商场。 以下是我到目前为止的代码。</p><pre> &lt;section id="vendors" class="zerogrid"&gt; &lt;div width="90%" &gt; &lt;div class="container" width="90%" style="background-color: #858585;"&gt; &lt;h2 class="clr-1" style="padding: 2%;" &gt;Our Suppliers&lt;/h2&gt; &lt;section class="customer-logos slider" style="padding-bottom: 5%;"&gt; &lt;div class="slide"&gt;&lt;img src="images/image1.png"&gt;&lt;/div&gt; &lt;div class="slide"&gt;&lt;img src="images/image2.png"&gt;&lt;/div&gt; &lt;div class="slide"&gt;&lt;img src="images/image3.png"&gt;&lt;/div&gt; &lt;/section&gt; &lt;/div&gt; &lt;/div&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(){ $('.customer-logos').slick({ slidesToShow: 6, slidesToScroll: 1, autoplay: true, autoplaySpeed: 1000, arrows: false, dots: false, pauseOnHover: true, responsive: [{ breakpoint: 768, settings: { slidesToShow: 106 } }, { breakpoint: 520, settings: { slidesToShow: 3 } }] }); }); &lt;/script&gt; &lt;/section&gt;</pre><p> 这个旋转木马工作得很好，任何帮助得到排序的东西都将不胜感激。</p></div>

Question

我已经在这个网站上搜索了几天寻找解决方案。 我想使用 javascript 从我服务器上的文件夹中获取图像并将它们放入这样的集合中。 我认为这会相当简单，但我什么也没想到。

它将取代此代码中部分标记之间的下面的 div。

我可以对它们全部进行硬编码，但是我需要在这个轮播中显示 107 张图像，从长远来看，能够从文件夹中添加/删除图像比硬编码要容易得多商场。 以下是我到目前为止的代码。

<section id="vendors" class="zerogrid">
        <div width="90%" >
            <div class="container" width="90%" style="background-color: #858585;">
            <h2 class="clr-1" style="padding: 2%;" >Our Suppliers</h2>
            <section class="customer-logos slider" style="padding-bottom: 5%;">

                <div class="slide"><img src="images/image1.png"></div>
                <div class="slide"><img src="images/image2.png"></div>
                <div class="slide"><img src="images/image3.png"></div>

            </section>
        </div>
    </div>

    <script type="text/javascript">
        $(document).ready(function(){
            $('.customer-logos').slick({
                slidesToShow: 6,
                slidesToScroll: 1,
                autoplay: true,
                autoplaySpeed: 1000,
                arrows: false,
                dots: false,
                    pauseOnHover: true,
                    responsive: [{
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 106
                    }
                }, {
                    breakpoint: 520,
                    settings: {
                        slidesToShow: 3
                    }
                }]
            });
        });
    </script>
    </section>

这个旋转木马工作得很好，任何帮助得到排序的东西都将不胜感激。

Answer 1

通过以下方式添加 ID：

<section class="customer-logos slider" style="padding-bottom: 5%;" id="customer-logos-slider">

并将其添加到您的脚本标签中：

window.onload = function () {
    let toAdd = '';
    let totalImages = 107;
    for (let i = 0; i < totalImages; i++) {
        toAdd += '<div class="slide"><img src="images/image' + i + '.png"></div>';
    }
    document.getElementById('customer-logos-slider').innerHTML = toAdd;
}

Answer 2

我一直在使用这段代码。 它正在放置图像占位符，但它们都一次显示，而不是单独的 div。 第 5 行代码也是为每个图像设置一个数字。 我希望 javascript 从文件夹中的每个图像中提取文件名，将其放在一个 div 中（类似于第 6 行），然后在图像的末尾重复它。

<script type="text/javascript">
              window.onload = function () {
                  let toAdd = '';
                  let totalImages = 107;
                  for (let i = 0; i < totalImages; i++) {
                  toAdd += '<div class="slide"><img src="images/vendors/' + i + '.jpg"></div>';
                  }
                   document.getElementById('logos').innerHTML = toAdd;
                 }

      </script>```

This last iteration of the tinkering leaves me with a large space in the section that contains nothing but I am guessing it's loading empty files due to the numbering. Any other thoughts from anyone?