随机显示随机图像jquery
问题描述:
我试图在随机区域内显示随机图像。我正在寻找的是接近this site。它们显示淡入淡出的图像和框。随机显示随机图像jquery
我找过一个这样的东西的jQuery插件,但我找不到任何。你们有什么想法吗?
答
以下函数将在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/
答
给每个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));
});
});
答
请原谅,因为我更多地考虑了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()';
});
答
如果您真的想要像链接网站的效果,那么你并不是真的想随机添加随机图片。这些位置是硬编码的,每个位置都从大小适当的图像子集中随机选择。
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的颜色设置动画。
哪部分你有问题? – kapa 2011-05-19 07:21:25
如何组合图像和颜色div,以及如何让它们出现在div中的不同区域 – sandelius 2011-05-19 07:22:20