选择要显示的随机图像 [英] Selecting a random image to display

问题描述

我有一个包含4个图像的页面。我希望这些图像可以从选择的图像中随机选择，每次查看页面。

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

image_01 < - 链接到 - > page_620.html

image_04 < - link to - > page_154.html

HTML：

 < div class =thankyou_wrapper> 
< div class =thankyou> 
< div class =socialphoto_container> 
< div class =socialphoto>< a href =page_082.htmltarget =_ self>< img src =images / image_01.jpgwidth =220height = 220/>< / a>< / div> 
< div class =socialphoto>< a href =page_128.htmltarget =_ self>< img src =images / image_05.jpgwidth =220height = 220/>< / a>< / div> 
< div class =socialphoto>< a href =page_852.htmltarget =_ self>< img src =images / image_08.jpgwidth =220height = 220/>< / a>< / div> 
< div class =socialphoto>< a href =page_685.htmltarget =_ self>< img src =images / image_04.jpgwidth =220height = 220/>< / a>< / div> 
< / div> 
< / div> 
< / div> 
  

CSS：

  .thankyou_wrapper {
 width：100％; 
背景颜色：#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; 
} 
  

有什么想法？

解决方案

b $ b

  //随机数组函数
 Array.prototype.shuffle = function（）{
 var i = this.length，j，temp; 
 if（i == 0）return this; （--i）{
 j = Math.floor（Math.random（）*（i + 1））; 
 temp = this [i]; 
 this [i] = this [j]; 
 this [j] = temp; 
} 
返回此; 
} 
 
 //将图像数据声明为对象数组
 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算法，取自此处。

I have a page that contains 4 images. I would like these images to be chosen randomly from a selection of images, each time the page is viewed.

The images also need to link to a specific page (depending on which image is displayed). For example:

• image_01 <- links to -> page_620.html
• image_04 <- links to -> 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;
}

Any ideas?

解决方案

It can be done by creating an array of the possible images, shuffling the array, then grab the first 4 images and append to the 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() is the Fisher-Yates algorithm, taken from here.

这篇关于选择要显示的随机图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！