javascript - 将图像动态添加到滑块 jQuery

Question

我有按类别的下拉菜单。我在 Cat1 中有 20 张图像，在 Cat2 中有 30 张图像，依此类推。这些图像来自 JSON Web 服务。我已经解析了 api，结果内容已添加到数组中。So When Cat1 is Selected from DropDown the images will load correctly but when select cat2 then they are not showing.

我所做的是在选择类别时将图像数组发送到此函数，是否通过循环将数组中的图像构造 html 字符串然后添加到 mcts1 div 元素，

function createIcons(imagesArray) {
    console.log(imagesArray);
    var iconsDict = imagesArray;
    var output = '';
    var foo = (iconsDict);
    for (var i = 0; i < iconsDict.length; i++) {
        output += '<img class="icons" id=' + i + ' src=' + foo[i] + ' width="100px" height="100px"/>';
    }
    $("#mcts1").html(output); 

}

这是我的html，

<div class="div2">
      <div id="mcts1">

      </div>
    </div>

我正在使用 menucool 滑块，这里是链接

Answer 1

试试这个..它对我有用

var html = "";
for(var i = 0; i <= images_array.length - 1; i++)
{
    html += "<img src='"+images_array[i]+"' class='sliderImage' id='image_"+i+"' />";
}
$("#slider").append(html);

Answer 2

您可以动态修改 jQuery Slider，因此请按照以下步骤操作

HTML

<div id="mcts1"></div>

脚本

   <script type=”text/javascript”&gt;
 function addSlides(str)
{ var sliderElm = document.getElementById(“mcts1”); 
sliderElm.innerHTML = str; 
} 
</script>

像这样从函数调用中获取输出后

 addSlides(output);