随机显示随机图像jquery
我试图在div中的随机区域显示随机图像。 我正在寻找的是靠近这个网站 。 它们显示淡入和淡出的图像和框。
我已经为这样的东西寻找了一个jQuery插件，但我找不到任何东西。 你们对此有什么想法吗？
使用数字符号为每个div指定一个不同的类名。 像’random1’，’random2’等等，然后使用css的样式，颜色和绝对定位div。
然后使用jquery循环div并以随机顺序为它们提供类。
$(document).ready(function() { var length = $("div").length; $('div').each(function(index) { $(this).addClass('random'+(Math.floor(Math.random()*length) + 1)); }); }); 请原谅，我越来越多地考虑OP的意图，而不是他的问题的文本。 这里需要的是工厂，而不是真正的随机列表。 通常情况下，我会把它作为一个class级，但我已经让那些不那么倾向的人更易于阅读。
此外，我会预先定义图像的“着陆点”，因为在算法上构建它只是要求一个糟糕的体验和麻烦…因此我的建议：
$(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('+')
'); } } 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()'; });
以下函数将在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( "
"); $('#' + id).fadeIn(); return id; }
假设您有10个名为image0.jpg到image10.jpg图像，它们具有相同的宽度/高度。
然后，您可以每隔10秒调用此函数，如下所示：
setInterval(function() { showImage("#container", 300, 300, "image" + rnd(10) + ".jpg", 100, 100); }, 10000);
容器应该是这样的：
我制作了一个与placekitten.com一起使用的示例 ，如果您更改尺寸，则会生成不同的图像。 它在这里： http ： //jsfiddle.net/G5Xrz/
如果你真的想要一个像链接网站这样的效果，那么你真的不想在随机位置添加随机图像。 这些位置是硬编码的，每个位置从适当大小的图像子集中随机选择。
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中，您只需要几个图像位置。
这种方法的优点是您可以完全按照自己的喜好设计布局，并使用彩色div和all。 您还可以使用该代码的变体来设置彩色div的颜色。