在随机位置显示随机图像jquery答案

【问题标题】：Show random images at random places jquery在随机位置显示随机图像jquery
【发布时间】：2011-05-19 07:15:14
【问题描述】：

我正在尝试在 div 内的随机区域显示随机图像。我正在寻找的内容接近this site。它们显示淡入淡出的图像和框。

我已经为类似的东西寻找了一个 jQuery 插件，但我找不到任何东西。大家对此有什么想法吗？

【问题讨论】：

您对哪一部分有问题？
如何组合图像和颜色 div 以及如何使它们出现在 div 内的不同区域

标签： jquery image-rotation

【解决方案1】：

用数字符号为每个 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));
    });
});

【讨论】：

【解决方案2】：

请原谅篇幅，因为我更多地考虑了 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()';
});

【讨论】：

【解决方案3】：

以下函数将在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;
}

假设您有 10 张名为 image0.jpg 到 image10.jpg 的图片，它们的宽度/高度相同。

然后您可以像这样每 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/

【讨论】：

【解决方案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 的颜色设置动画。

【讨论】：