刷新和/或定時器之間切換div內容

我試圖做一個簡單的頁面與4個divs，每個包含一個圖像上傳到數據庫。刷新和/或定時器之間切換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。我試圖刪除利潤和這樣的東西，但沒有奏效。任何想法如何解決它？

來源

2016-02-24 Mr_Bober

您還沒有貼出你的代碼，但解決的辦法似乎很簡單。如果您需要關於選擇獨特隨機圖像的功能方面的幫助，請發送您提供的代碼 – drakyoko

最好的方法是在每個間隔內從數據庫提供獨特的圖像。如果您試圖避免使用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

來源

2016-02-24 23:47:57 vsevolodts

謝謝，它完美無缺！我剛剛開始使用JS，所以即使是「這個簡單」的東西對我來說也是一個全新的世界。 –

刷新和/或定時器之間切換div內容

回答

相關問題