0

ここで jQuery 初心者なので、質問をお詫びします。

私はクライアントのために静的サイトを書いていますが、彼らは私にかなり興味深い挑戦を与えてくれました。

ディレクトリから画像をランダムに取得してグリッドに配置するボタンをページに配置したいと考えています。私は HTML とスタイリングに優れていますが、jQuery をどこから始めればよいかわかりません。

これは基本的に、ボタンが1秒ごとに押されると仮定して、実装したいもののデモです。

ランダム画像ボタン

これは、jQuery のみを使用して (つまり、静的サイトとして) 実行可能および/または可能ですか?

私はまだWeb開発の学習者なので、説明を伴う回答は大歓迎です!

ありがとう！

4

2 に答える 2

0

したがって、画像ファイル名を制御できると仮定すると、例として挙げた 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-15T12:53:02.877 に答える
0

$.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-14T23:13:55.903 に答える