选择要显示的随机图像答案

【问题标题】：Selecting a random image to display选择要显示的随机图像
【发布时间】：2013-06-13 02:25:37
【问题描述】：

我有一个包含 4 张图片的页面。我希望在每次查看页面时从一组图像中随机选择这些图像。

图像还需要链接到特定页面（取决于显示的图像）。例如：

image_01 page_620.html
image_04 page_154.html

HTML：

<div class="thankyou_wrapper">
  <div class="thankyou">
    <div class="socialphoto_container">
      <div class="socialphoto"><a href="page_082.html" target="_self"><img src="images/image_01.jpg" width="220" height="220" /></a></div>
      <div class="socialphoto"><a href="page_128.html" target="_self"><img src="images/image_05.jpg" width="220" height="220" /></a></div>
      <div class="socialphoto"><a href="page_852.html" target="_self"><img src="images/image_08.jpg" width="220" height="220" /></a></div>
      <div class="socialphoto"><a href="page_685.html" target="_self"><img src="images/image_04.jpg" width="220" height="220" /></a></div>
    </div>
  </div>
</div>

CSS：

.thankyou_wrapper {
    width: 100%;
    background-color: #FFF;
}
.thankyou {
    margin: auto;
    width: 940px;
    min-height: 216px;
    overflow: hidden;
    padding-top: 20px;
    padding-bottom: 20px;
}
.socialphoto_container {
    width: 940px;
    height: 230px;
}
.socialphoto {
    width: 240px;
    height: 220px;
    margin-right: 0px;
    float: left;
}
.socialphoto:last-child {
    width: 220px;
}

有什么想法吗？

【问题讨论】：

您可以使用 JavaScript 更改 img 元素的 src。但是如果 JavaScript 被禁用，那么你就不走运了。或者，您可以选择图像服务器端（通过让imgs 指向可以动态创建的东西，例如 PHP 文件。但是您会遇到缓存问题 - 每次用户重新访问时，图片都不会改变页面。
@MrLister，对于缓存部分，例如可以通过使用 URL 中的时间戳来解决。所以理论上，你的解决方案是可行的。

标签： javascript jquery html css random

【解决方案1】：

这可以通过创建一个可能的图像数组，打乱数组，然后抓取前 4 个图像并附加到 div 来完成：

// randomize array function
Array.prototype.shuffle = function() {
  var i = this.length, j, temp;
  if ( i == 0 ) return this;
  while ( --i ) {
     j = Math.floor( Math.random() * ( i + 1 ) );
     temp = this[i];
     this[i] = this[j];
     this[j] = temp;
  }
  return this;
}

// declare image data as array of objects
var images = [
    { src : 'images/image_01.jpg', href : 'page_082.html' },
    { src : 'images/image_02.jpg', href : 'page_083.html' },
    { src : 'images/image_03.jpg', href : 'page_084.html' },
    { src : 'images/image_04.jpg', href : 'page_085.html' },
    { src : 'images/image_05.jpg', href : 'page_086.html' },
    { src : 'images/image_06.jpg', href : 'page_087.html' }
];

$(document).ready(function(){

    var img, anchor, div;
    var cont = $('.socialphoto_container');
    cont.children().remove();

    images.shuffle();

    for(var i=0; i<4; i++){
        img = $('<img />', { src : images[i].src });
        anchor = $('<a></a>', { href : images[i].href, target : '_self' });
        div = $('<div></div>', { class : 'socialphoto' });
        anchor.append(img);
        div.append(anchor);
        cont.append(div);
    }
});

Array.shuffle() 是 Fisher-Yates 算法，取自 here。

【讨论】：

我如何将它们添加到我的 HTML 中？
for 循环在页面加载时将它们添加到 HTML (DOM)，您无需更改实际的 HTML 代码（将其保留在您的问题中）。