隨機顯示隨機圖像jquery

Question

我試圖在隨機區域內顯示隨機圖像。我正在尋找的是接近this site。它們顯示淡入淡出的圖像和框。

我找過一個這樣的東西的jQuery插件，但我找不到任何。你們有什麼想法嗎？

Answer 1

以下函數將在container選擇器中添加一個圖像並返回它的id。

function rnd(max) { return Math.floor(Math.random()*(max+1)) } 

function showImage(container, maxwidth, maxheight, imgsrc, imgwidth, imgheight) { 
    var id = "newimage" + rnd(1000000); 
    $(container).append(
     "<img id='" + id + "' src='" + imgsrc + 
     "' style='display:block; float:left; position:absolute;" + 
     "left:" + rnd(maxwidth - imgwidth) + "px;" + 
     "top:" + rnd(maxheight - imgheight) + "px'>"); 
    $('#' + id).fadeIn(); 
    return id; 
} 

比方說，你有一個名爲image0.jpg到image10.jpg 10個圖像，它們是相同的寬度/高度。

然後，您可以調用這個函數像這樣每10秒：

setInterval(function() { 
    showImage("#container", 300, 300, "image" + rnd(10) + ".jpg", 100, 100); 
}, 10000); 

容器應該是這樣的：

<div id='container' style='width:300px; height:300px; position:relative'> 

我做了一個樣本與placekitten.com，其中不同的圖像是爲了工作如果您更改尺寸則會生成。它在這裏：http://jsfiddle.net/G5Xrz/

Answer 2

給每個div一個帶有數字符號的不同類名。像'隨機1'，'隨機2'等東西，然後樣式，顏色和絕對使用css div的位置。

然後使用jquery循環div的並給他們的類以隨機順序。

$(document).ready(function() { 
    var length = $("div").length; 
    $('div').each(function(index) { 
     $(this).addClass('random'+(Math.floor(Math.random()*length) + 1)); 
    }); 
}); 

Answer 3

請原諒，因爲我更多地考慮了OP的意圖，而不是他的問題的文本。這裏需要的是一個工廠，而不是一個真正的隨機列表。通常情況下，我會讓這個課程成爲一堂課，但是我會讓那些不那麼傾向的人更容易理解。

另外，我想預先定義爲圖像的「着陸點」，因爲算法構建它只是要求一個貧窮的經驗和麻煩......因此我的建議：

$(document).ready(function(){ 
    function rndsort(a,b) 
    { 
    return (Math.random() > 0.5) ? a : b; 
    } 
    function getImage() 
    { 
     if (imgs.length > 0) 
     { 
     return imgs.shift(); 
     } 
    } 
    function switchImage(container) 
    { 
    var newImage = getImage(); 
    if (newImage) 
    { 
     if ($(container).data('img')) 
     { 
      imgs.push($(container.data('img')); 
     } 
     $(container).html('<img src="'+getImage()+'" />'); 
    } 
    } 

    function doRandom() 
    { 
    switchImage($('.places').get(Math.floor(Math.random() * $('.places'.length))); 
    } 

    var imgs = ['image1.jpg','image2.jpg', etc... ]; 

    imgs.sort(rndsort); 

    $('.places').each(function(idx, el){ 
    switchImage(el); 
    }); 
    // add a timer and start calling 'doRandom()'; 
}); 

Answer 4

如果您真的想要像鏈接網站的效果，那麼你並不是真的想隨機添加隨機圖片。這些位置是硬編碼的，每個位置都從大小適當的圖像子集中隨機選擇。

var tS; 
var tL; 
var imgSmall = ["1.jpg", "2.png", "3.png", "10.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg", "9.jpg"]; 
var smallLen = imgSmall.length; 
var imgLarge = ["A1.jpg", "A2.jpg", "A3.jpg", "A10.jpg", "A4.bmp", "A5.jpg", "A6.jpg", "A7.jpg", "A8.jpg", "A9.jpg"]; 
var largeLen = imgLarge.length; 

function showLarge() { 
    var idxLarge = Math.floor(Math.random() * largeLen); 
    $("#large").fadeToggle(300, function() { $("#large").attr("src", "img/" + imgLarge[idxLarge]) }).fadeToggle(300); 
    tL = setTimeout("showLarge()", 2000); 
} 

function showSmall() { 
    var idxSmall = Math.floor(Math.random() * smallLen); 
    $("#small").fadeToggle(300, function() { $("#small").attr("src", "img/" + imgSmall[idxSmall]) }).fadeToggle(300); 
    tS = setTimeout("showSmall()", 1700); 
} 

$(document).ready(function() { 
    showLarge(); 
    showSmall(); 
}); 

在HTML中，您只需要圖像的幾個位置。

<img src="img/1.jpg" id="small" style="position:absolute; top:50px; left:100px;" /> 

<img src="img/A8.jpg" id="large" style="position:absolute; top:100px; left:400px;" /> 

這種方法的優點是，您可以根據自己的喜好設計佈局，使用彩色的div和全部。您也可以使用該代碼的變體來爲彩色div的顏色設置動畫。