jQuery隨機淡入圖像

我有一個有很多小圖像的容器。jQuery隨機淡入圖像

<div id="container"> 
    <img src="1.jpg" /> 
    <img src="2.jpg" /> 
    <img src="3.jpg" /> 
    ... 
    <img src="100.jpg" /> 
</div>

我不透明度設置爲0（不hidding）然後我想一半後顯示（淡入）隨機圖像第二。例如第5，第1，第55 ...

任何建議，感謝名單了很多

來源

2009-06-18 noname

試試這個

<script type="text/javascript"> 

//generate random number 
var randomnumber=Math.floor(Math.random()*$("#container").children().length); 
$(function() { 
    //hide all the images (if not already done) 
    $("#container > img").hide(); 

    //set timeout for image to appear (set at 500ms) 
    setTimeout(function(){ 
     //fade in the random index of the image collection 
     $("#container > img:eq(" + randomnumber + ")").fadeIn(); 
    }, 500);  
}); 
</script>

來源

2009-06-18 12:09:24 Josh

你怎麼能確定：1）所有數字將最終將顯示（可見），2）知道，所有的顯示並停止嘗試顯示它們？ – menardmam 2013-12-10 15:53:15

您可以創建一個選項數組並檢查您的隨機數，一旦使用它，您將從數組中刪除它。 – Josh 2013-12-16 11:32:07

把一個ID，每個圖像，與一些模式，然後褪色圖像與隨機生成的ID，用數學。隨機來自javascript

function getImage(minim,maxim) { 
    return "img" + Math.round(Math.random()*(maxim-minim)+minim); 
}

來源

2009-06-18 12:09:11

如果您想在半秒後開始褪色，或者在半秒鐘內褪色，則不清楚（對我而言）。但是，在後半秒褪去。如果你想以其他方式做到這一點，只是忽略了與的setTimeout（）的東西

你想要做什麼的一般描述是：
創建功能半秒（的setTimeout之後，當頁面加載時調用）
該函數應該生成一個隨機數，其中min爲0，max爲#container元素的子元素數減1 1
使隨機數所提供的索引變爲#container的子元素。

Pusdo代碼（這是一個很長的時間，因爲我已經做了與jQuery。或JavaScript任何爲此事）

function onDocumentReady(){ 
    setTimeout(500, "fadeInRandom()"); 
} 

function fadeInRandom(){  
    var numElements = $("#container").children().length; 
    var randomElem = Math.random() * (numElements-1); 
    $("#container").children()[randomElem].fadeIn(); 
}

來源

2009-06-18 12:09:17 Yacoby

我會用產生的隨機數創建圖像的'src'屬性並相應地構建jQuery選擇器：

setInterval (showRandomImage, 500); 

function showRandomImage() 
{ 
    var randNo = Math.floor(Math.random() * 101); 
    $("#container > img[src=" + randNo + "'.jpg']") 
        .animate({opacity: 0}, 500).fadeIn('slow'); 
}

來源

2009-06-18 12:21:53 karim79

如果要淡入淡出，在所有圖像中，不需要使用所有隨機的東西，只需要在500ms和1秒之間延遲隨機數。無論如何，你必須把隱藏功能。或者用不透明度來使用動畫CSS。

$('#container img').each(function(index) { 

    $(this).delay(Math.random()*500+500).fadeIn(); 

});

你不會找到任何簡單得多，並且具有相同的效果

來源

2012-02-16 10:03:48

jQuery隨機淡入圖像

回答

相關問題