動態填充圖像與共享類在JS

我有類似下面，標記明智。我有一個圖像文件夾，其中所有的拇指圖像按順序在'thumb1，thumb2，thumb3'等（但約100）。我想以「thumb1」作爲第一個實例來填充拇指類的第一個實例，然後向下，2,3,4等 - 但不觸及標記。這可以用JS來完成，訂單是否可以被檢測到？第一個實例= thumb1？動態填充圖像與共享類在JS

<div class="thumb"></div> 
<div class="thumb"></div> 
<div class="thumb"></div> 
<div class="thumb"></div> 
<div class="thumb"></div> 
<div class="thumb"></div> 
<div class="thumb"></div> 
<div class="thumb"></div> 
<div class="thumb"></div> 
<div class="thumb"></div>

來源

2015-07-10 Fred Randall

你想要的DIV中的拇指形象？ – Keerthi

拇指的數量是否改變？ – cgatian

@Keerthi是的，我願意 –

假設到路徑的縮略圖是靜態的，知道你可以做到這一點是這樣的：用一流的縮略圖

$('.thumb').each(function(index){ 
    var src = 'path/to/img/thumb' + index+1; 
    var $img = $('<img />').attr('src', src); 
    $(this).html($img); 
});

遍歷每個div
使用元素的index到參考圖像（+1，因爲索引是從0開始的）
添加新的img -element to th與徑E DIV設置

相反的.html()你也可以使用.append()或.prepend()到img添加到您的div。

Demo

參考

.each()

來源

2015-07-10 14:40:06 empiric

動態填充圖像與共享類在JS

回答

相關問題