jQuery यादृच्छिक रूप से फीका छवियों

Question

मेरे पास बहुत सी छोटी छवियों वाला कंटेनर है।

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

मैं 0. (नहीं hidding) करने के लिए अस्पष्टता सेट तो मैं आधे के बाद दूसरे को दिखाने के लिए (fadein) यादृच्छिक छवि चाहते हैं। उदाहरण के 5 वीं, 1, 55 वीं ...

कोई सुझाव, एक बहुत

Answer 1

कोशिश इस

<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> 

Answer 2

thanx के लिए प्रत्येक छवि को एक आईडी शब्दों में कहें, एक नंबर पैटर्न के साथ, और फिर एक यादृच्छिक उत्पन्न आईडी के साथ एक छवि हो पाती, गणित का उपयोग कर। जावास्क्रिप्ट

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

Answer 3

से यादृच्छिक यह (मेरे लिए) यदि आप आधे सेकंड के बाद fading शुरू करते हैं, या आधे सेकंड में में फीका करना चाहते हैं स्पष्ट नहीं है। हालांकि, में आधे सेकेंड के बाद फीका के साथ जा रहा है। आप इसे अन्यथा क्या करना चाहते हैं, तो बस setTimeout() के साथ सामान की अनदेखी

कि आप क्या करना चाहते हैं के सामान्य अवलोकन है:
एक समारोह बनाएं आधे सेकंड (setTimeout के बाद, जब पेज लोड किया है कि कहा जाता है)
उस फ़ंक्शन को 0 के रूप में न्यूनतम के साथ यादृच्छिक संख्या उत्पन्न करनी चाहिए, और अधिकतम # कंटेनर तत्व शून्य 1
यादृच्छिक संख्या द्वारा प्रदान की गई इंडेक्स के साथ # कंटेनर के बच्चे को फीका करें।

Pusdo कोड

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

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

Answer 4

मैं करने के लिए उत्पन्न यादृच्छिक संख्या का प्रयोग करेंगे (यह एक लंबे समय के बाद से मैं उस बात के लिए jQuery। या जावास्क्रिप्ट के साथ कुछ भी किया है) छवि की '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'); 
} 

Answer 5

यदि आप फीका करना चाहते हैं- इसके बजाय सभी छवियों में, सभी यादृच्छिक सामानों का उपयोग करने की आवश्यकता नहीं है, केवल 500 और 1 सेकंड के बीच यादृच्छिक संख्या यादृच्छिक संख्या देरी करें। आपको वैसे भी छुपा कार्य रखना होगा। या ओपेसिटी के साथ एनिमेट सीएसएस का उपयोग करें।

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

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

}); 

आपको लगता है कि अधिक आसान कुछ भी नहीं है नहीं मिलेगा, और एक ही प्रभाव के साथ