Javascript 选择要显示的随机图像

我有一个包含4个图像的页面。我想这些图像被随机选择从一个选择的图像，每次页面被查看

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

• 图像\u 01第\u 620.html页
• image_04 page_154.html

HTML:

---

有什么想法吗？

可以通过创建一个可能的图像数组，洗牌该数组，然后抓取前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.prototype.shuffle=函数（）{
var i=该长度，j，温度；
如果（i==0）返回该值；
而（--i）{
j=数学地板（数学随机（）*（i+1））；
温度=此[i]；
这个[i]=这个[j]；
此[j]=温度；
}
归还这个；
}
//将图像数据声明为对象数组
变量图像=[
{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'}
];
$（文档）.ready（函数（）{
var img，anchor，div；
var cont=$（“.socialphoto_container”）；
cont.children（）.remove（）；
images.shuffle（）；
对于（var i=0；iYou可以使用JavaScript更改
img
元素的
src
。但是如果禁用了JavaScript，您就不走运了。或者，您可以选择服务器端的图像（通过让
img
s指向可以动态创建的东西，例如PHP文件。但是你会遇到缓存问题-图片不会在用户每次重新访问页面时更改。@对于缓存部分，可以通过使用URL中的时间戳来解决。因此，理论上，你的解决方案可以工作。如何然后我会将它们添加到我的HTML中吗？当页面加载时，
for
循环将它们添加到HTML（DOM）中，您不需要更改实际的HTML代码（将其保留在您的问题中）。
.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;
}

// 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);
    }
});