مسج fadeIn عشوائيا الصور

Question

ولدي وعاء مع الكثير من الصور الصغيرة.

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

وأنا وضعت التعتيم إلى 0. (لا باخفاء) ثم أريد أن أثبت (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

ووضع id لكل صورة، مع وجود نمط العدد، ومن ثم تتلاشى صورة مع معرف لدت عشوائي، وذلك باستخدام math.random من جافا سكريبت

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

Answer 3

وليس من الواضح (بالنسبة لي) إذا كنت تريد أن تبدأ يتلاشى بعد نصف ثانية، أو تتلاشى في في نصف ثانية. ومع ذلك، والذهاب مع تتلاشى في بعد نصف ثانية. إذا كنت تريد أن تفعل ذلك على خلاف ذلك، فقط تجاهل الاشياء مع setTimeout ()

ونظرة عامة على ما تريد القيام به هو:
إنشاء دالة عندما تحمل الصفحة التي يتم استدعاؤها بعد نصف الثاني (setTimeout)
أن وظيفة يجب إنشاء رقم عشوائي، مع دقيقة ك 0، والحد الأقصى حيث بلغ عدد الأطفال من العنصر #container ناقص 1
تتلاشى الطفل من #container مع مؤشر المقدمة من عدد عشوائي.

وكود 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

إذا كنت تريد أن تتلاشى في جميع الصور بدلا من ذلك، لا توجد حاجة لاستخدام كل الاشياء عشوائي، فقط cicle وتأخير رقم عشوائي بين 500MS و1 ثانية. لديك لوضع وظيفة اخفاء أي حال. أو باستخدام التعتيم تحريك المغلق.

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

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

});

وأنك لن تجد أي شيء أبسط من ذلك، ومع نفس التأثير

Answer 5

وأود أن استخدام رقم عشوائي ولدت لإنشاء صورة لسمة 'src' وبناء محدد مسج وفقا لذلك:

setInterval ( showRandomImage, 500 );

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