jQuery - 從目錄加載隨機圖片

jQuery noob在這裏，所以這個問題的道歉！jQuery - 從目錄加載隨機圖片

我正在爲客戶寫一個靜態網站，他們給了我一個相當有趣的挑戰，我不知道如何處理。

他們希望在頁面上有一個按鈕，可以從目錄中獲取隨機圖像並將它們放置在網格中。我非常喜歡HTML和樣式，我只是不知道從哪裏開始使用jQuery。

這基本上是我想要實現的演示，假設每秒鐘按下按鈕。

Random images button

這是使用可行的和/或可能只jQuery的（即，具有其作爲靜態站點）？

答案隨附說明非常感謝，因爲我仍然是一個學習者在web開發！

謝謝！

來源

2015-06-14 Fares K. A.

是否有可能得到的數組文件名稱預先知道/編碼，圖像是否有任何格式/名稱格式，或完全隨機？你有任何控制圖像名稱？ – depperm

@depperm是的，我確切知道文件名是什麼以及它們的存儲位置。我可以稱它們爲1.jgp，2.jpg等。 –

@depperm我基本上試圖實現這樣的東西：http://stackoverflow.com/a/22113400/2188011 –

嘗試利用$.map()，.remove()，setTimeout，.appendTo()，.on()

var updateImages = function updateImages() { 
// remove all images from `#container` element having images as child nodes 
$("#container img").remove(); 
// append eight "random" images to `#container` 
$.map($.makeArray(Array(8)), function(val, key) { 
    setTimeout(function() { 
    $("<img />", 
     // image files named "image-0.jpg" - "image-7.jpg" , 
     // `key` : `0` - `7` 
     {"src": "/path/to/images/image-" + key + ".jpg"}) 
    .appendTo("#container"); 
    }, 1 + Math.floor(Math.random() * 25)) 
});  
}; 
// call `updateImages` 
$("button").on("click", updateImages); 
// set reference to `interval` 
// var interval = 0; 
// call `updateImages` every `1000` ms 
// interval = setInterval(function() { 
// updateImages() 
// }, 1000);

來源

2015-06-14 23:13:55 guest271314

所以假設你在圖像文件名的控制，我會說出他們像你提到的例子，image.png。你的JS是這樣的（我用的造型表）：

$(function(){ 
    loadRandom(); 
    $('#clickMe').on('click',function(){ 
     loadRandom(); 
    }); 
}); 
function loadRandom(){ 
    var ranNums=[]; 
    while(ranNums.length<8){ 
     var t=Math.floor((Math.random()*12)+1); 
     if(ranNums.indexOf(t)==-1) 
      ranNums.push(t); 
    } 
    var i=0; 
    $('#imageTable > tbody > tr > td > img').each(function(){ 
     $(this).attr('src','image'+ranNums[i]+'.png'); 
     i++; 
    }); 
}

和HTML，再次使用樣式表，看起來像

<input type='button' id='clickMe' value='Click Me' /> 
<table id='imageTable'> 
<tr> 
    <td><img src=''></td> 
    <td><img src=''></td> 
    <td><img src=''></td> 
    <td><img src=''></td> 
</tr> 
<tr> 
    <td><img src=''></td> 
    <td><img src=''></td> 
    <td><img src=''></td> 
    <td><img src=''></td> 
</tr> 
</table>

來源

2015-06-15 12:53:02 depperm

jQuery - 從目錄加載隨機圖片

回答

相關問題