javascript - 在刷新和/或计时器时在 div 之间切换内容

Question

我正在尝试制作一个包含 4 个 div 的简单页面，每个 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