Question

我试图制作一个包含4个div的简单页面，每个div包含一个上传到数据库的图像。

我希望每个div中的图像在有人刷新页面时（最终在导航几分钟后）进行更改，这样每次打开页面时，每个内部的图片都会有所不同。

例如：我有10张图片

1° time: div1(img1), div2(img2), div3(img3), div4(img4)

2° time: div1(img9), div2(img6), div3(img8), div4(img3)

3° time: div1(img1), div2(img4), div3(img10), div4(img5)

等等..最棘手的部分是两次不应该是同一个图像，所以让我们说它永远不应该发生：

div1(img1), div2(img2), div3(img3), div4(img1)

编辑：所以这发生了：演示：http://codepen.io/anon/pen/grbwvx 我正在移动div，他们应该是正方形（如果我不把图像放在其中，它们就是它们）。但是当图像被加载时，它会搞砸我的CSS。我尝试删除边距和类似的东西，但没有任何效果。知道怎么解决吗？

Answer 1

最好的方法是在每个时间间隔内从数据库提供唯一的图像。如果您试图避免使用SQL / MySQL，请假设您已准备好页面上的列表（数组）。

HTML：

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>
<button>reload</button>

JQuery的：

/* generate the array of images you want to choose from */
var srcarray = [
  "https://s-media-cache-ak0.pinimg.com/736x/7e/1d/4a/7e1d4a1566976f139a2ba58b108e2bce.jpg",
  "http://rs832.pbsrc.com/albums/zz248/Paria53/Edited/Random.jpg~c200",
  "http://images.freeimages.com/images/premium/large-thumbs/5187/51875120-random-numbers-forming-a-sphere.jpg",
  "http://ccl.northwestern.edu/netlogo/community/land-random.png",
  "http://d2894izlucyd11.cloudfront.net/images/p/88/27/08/dd/7df9039478fe4a238746d1acd38a980e.jpg",
  "http://t10.deviantart.net/lGgxLge7u3hucL5OBoZkiDvnnqA=/300x200/filters:fixed_height(100,100):origin()/pre15/5fe0/th/pre/f/2008/191/1/9/random_by_d_faultx.png",
  "http://www.moooi.com/sites/default/files/styles/project_thumb_product/public/thumb-image/randomledfloorm.jpg?itok=2wIu1tk6",
  "http://images5.fanpop.com/image/photos/25200000/Colorful-Bokeh-Lights-random-25230232-200-200.gif",
  "http://t00.deviantart.net/YWdrXj-21kfzc-IMLSli2UmdhGU=/300x200/filters:fixed_height(100,100):origin()/pre13/93b0/th/pre/f/2010/044/b/4/random_space_invaider_by_random_liquo.jpg",
  "http://www.islandstone.com/mediafiles/product_records/56_Random_lines_thumb.jpg"
];

function randomizeImages() {
  arr = [];
  /* select unique images from the array and display them into relevant divs (any number divs allowed, should be less than available images)*/
  while(arr.length < $("section div").length){
    var randomnumber= srcarray[Math.floor(Math.random()*srcarray.length)];
    var found=false;
    for(var i=0;i<arr.length;i++){
       if(arr[i]==randomnumber){found=true;break}
    }
    if(!found)arr[arr.length]=randomnumber;
    $( "section div:nth-child("+(i+1)+")" ).html( '<img src="'+randomnumber+'">' );
  };
}

//randomize images when page is reloaded
$(function() {
 randomizeImages();
});
//randomize images when clicking a reload button (for display purposes only)
$("button").click ( function() {
  randomizeImages(); 
});
//randomize images every 5 seconds (change interval as you wish)
window.setInterval(function(){
  randomizeImages(); 
}, 5000);

我为你做了一个演示：http://codepen.io/VsevolodTS/pen/KzPdpX

在刷新和/或计时器

1 个答案: