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

I have been searching this site for days looking for a solution. I would like to use javascript to take images from a folder on my server and put them into a set of like this. I thought it would be fairly simple but I've come up with nothing.

It would take the place of the divs below between the section tags in this code.

I could just hard code them all but there are 107 images that I need to display in this carousel and it would be much easier in the long run to be able to add/delete images from the folder than to do so by having to hard code them all. Below is the code I have so far.

<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>

This carousel works fine, sp any help getting the thing sorted would be greatly appreciated.

Answer 1

Add id by:

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

And add this to your script tag:

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

I have been working with this bit of code. It is placing image placeholders but all of them are displaying at one time and not is separate divs. Also the 5th line of code that is setting each image with a number. I would like the javascript to pull the file name from each image in the folder, place it in a div (similar to line 6) and then repeat it the end of the images.

<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?