随机显示随机图像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的颜色设置动画。