使用javascript而不是jQuery添加图像以动态地平滑

Question

我有一张带有静态图像的图像，没有任何问题。当我尝试使用Java脚本代码将这些图像动态添加到平滑图像时，我的问题就开始了。 这是静态的

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


  <div class="container" style="padding-bottom:1%;">
                    <h2>Our  Partners</h2>
                    <hr style="width: 40px; border-width: 1px;border: 2px solid #1a2b44; align-items: center;margin-bottom: 0%;">
                    <div name="gmdiv" id="gmdiv" class="customer-logos">
                        <div class="slide"><img data-toggle="tooltip" data-placement="bottom" title="Duran Wheating" class="logo" src="assets/images/duran.png" style="margin-top:6%;cursor: pointer;"></div>
                        <div class="slide "><img data-toggle="tooltip" data-placement="bottom" title="PAC" class="logo" src="assets/images/pac.png" style="margin-top:5%;cursor: pointer;width: 90%;"></div>
                        <div class="slide "><img data-toggle="tooltip" data-placement="bottom" title="PM Tamson Instruments" class="logo" src="assets/images/pmt.png" style="margin-top:6%;cursor: pointer;"></div>
                        <div class="slide "><img data-toggle="tooltip" data-placement="bottom" title="Pharma Test" class="logo" src="assets/images/PHARMA.jpg" style="margin-top:-3%;cursor: pointer;"></div>
                        <div class="slide "><img data-toggle="tooltip" data-placement="bottom" title="PAMAS" class="logo" src="assets/images/pamas.jpg" style="margin-top:3%;cursor: pointer;"></div>
                        <div class="slide "><img data-toggle="tooltip" data-placement="bottom" title="ROFA" class="logo" src="assets/images/rofa1.png" style="cursor: pointer;margin-top: 7%;"></div>


                    </div>
                </div>

现在我正在尝试从数据库中读取这些图像或动态更改它们。

所以我试图从HTML删除每个图像，并使用onload函数通过Java脚本代码添加它

function load{
  var GMdiv = document.getElementById("gmdiv");

    var div = document.createElement("div");
    div.setAttribute("class", "slide2");
    var image = document.createElement("IMG"); 
    image.setAttribute("src", "assets/images/duran.png");
    image.setAttribute("class","logo");
    image.style.marginTop  ="6%";
    image.style.cursor = "pointer"; 
    div.appendChild(image);

     var div2 = document.createElement("div");
    div2.setAttribute("class", "slide2");    var image2 = document.createElement("IMG"); 
    image2.setAttribute("src", "assets/images/pac.png");
    image2.setAttribute("class","logo");
    image2.style.marginTop  ="6%";
    image2.style.cursor = "pointer"; 
    div2.appendChild(image2);


     var div3 = document.createElement("div");
    div3.setAttribute("class", "slide2");    var image3 = document.createElement("IMG"); 
    image3.setAttribute("src", "assets/images/pmt.png");
    image3.setAttribute("class","logo");
    image3.style.marginTop  ="6%";
    image3.style.cursor = "pointer"; 
    div3.appendChild(image3);


    GMdiv.appendChild(div);
   GMdiv.appendChild(div2);
    GMdiv.appendChild(div3);

}

这是我的动态代码的结果

这是静态的，而正确的是