جافا سكريبت:منبثقة مع فيلم من الصور في النافذة الرئيسية

StackOverflow https://stackoverflow.com/questions/692557

سؤال

أنا في الغالب-مبتدئ جافا سكريبت بوار و أنا أحاول على صفحة ويب التي عند الضغط على زر نافذة للملوثات العضوية الثابتة مما يدل دوري "فيلم" مع الصور من النافذة الرئيسية.من ما حاولت أبحث في جميع أنحاء أشعر أنني قريبة جدا, ولكن شيئا ما التملص مني.

أنا أعرف ما يلي النتائج في منفصلين الأسئلة التي تستحق اثنين من وظائف منفصلة.ولكن أعتقد لأن كلاهما ذات الصلة مع نفس المشكلة/هدف, ربما هذا يعود في واحد (ولو طويلة) وظيفة.لذلك آمل أن حجم هذا لا enfuriate الناس كثيرا ...;-)

على أي حال, وهنا لقطة ما أعتقد هو رمز ذات الصلة:

<html>
<head>
<script language="javascript">
function wait() {}
function anim() {
  var timeout; var next;
  var popuptitle='Movie';
  var main=parent;
  var popup=parent.open("","",
      "width="+main.document.images[0].width+",height="+(main.document.images[0].height+40)+
      "toolbar=no,location=no,directories=no,status=no,"+
      "menubar=no,scrollbars=no,copyhistory=no,resizable=no");
  popup.document.write('<html><head><title>'+popuptitle+'</title></head><body>'+
    '<p align="center"><img name="anim" width="100%" alt=""></p>'+
    '<p align="center"><button name="close" onclick="javascript:window.close();">Close</button></p>'+
    '</body></html>');
  /*while(true)*/
  for(i=0; i<main.document.images.length; i++) {
    next=main.document.images[i].src;
    popup.document.images[0].src=next;
    timeout=setTimeout('wait();',500);
  }
}
</script>
</head>
<body><h1>Pictures + animation</h1>
<p><button name="exec" onclick="javascript:anim();">Animate (popup)</button></p>
<p><img src="img1.jpg"></p>
....
<p><img src="img16.jpg"></p>
</body>
</html>

كتبت/تكييف هذا لملاءمة;أتمنى أن لا تجعل أي أخطاء إملائية...

أنا أعمل مع دبيان حفر هذا Iceweasel (2 فايرفوكس.x أطلقتها);لم أحاول هذا مع المتصفحات الأخرى.في Iceweasel ، ما يحدث هو:

  1. منبثقة تظهر كما هو المفترض ولكن يبدو دورة يذهب مباشرة إلى الصورة الأخيرة. setTimeout يبدو أن ليس لها أي تأثير في "التوقف" بين الصور.
  2. الصورة الأخيرة يظهر ، المنبثقة شريط الحالة يظهر شريط التقدم في منتصف الطريق ، مما يشير إلى شيء هو التحميل.

لذا أسئلتي هي:

  1. كيف أنا من المفترض أن استخدام setTimeout الدعوة هنا ؟ لقد حاولت أن تجعل الاتصال "فارغة" وظيفة ، لذلك تعمل "وقفة" في دورة بعد setTimeout(), حيث دورة التحديثات المنبثقة صورة واحدة من النافذة الرئيسية الصور مجموعة.
  2. أجد أنه إذا كنت تحميل منبثقة عن طريق تحميل الكود من ملف خارجي (anim.html) ، شريط المعلومات يظهر من "شريط التقدم" أن الإطار يبقى أتوقع تحميل.أنا لا تزال جارية في محاولة إذا كان من مكان آخر ، ولكن ما أريد أن أعرف إذا كان من المهم/أن كنت تحميل صفحة HTML من ملف خارجي مع window.open(), مقابل التحميل نافذة فارغة القيام writeln إلى أن "الكتابة" HTML.
  3. لقد علق while(true) في دورة, لأن خلاف ذلك المتصفح توقف عن الاستجابة على جهاز كمبيوتر يذهب إلى 100 ٪ وحدة المعالجة المركزية.أنا يمكن أن تجعل if في for دورة تعيين العداد إلى الصفر قبل أن البند الأخير ، ولكن هناك آخر "الأنيق" أو "أكثر ملاءمة" طريقة لجعل هذا لا نهائي دورة أو لا while(true) هل ما يرام ؟

أنا appretiate التعليقات الخاصة بك في وقت مبكر ، إذا كان ذلك ممكنا مؤشر إلى القائمة الببليوغرافيا واصفا حلول مماثلة.

هل كانت مفيدة؟

المحلول

أنا لا أعتقد أن هذا يعني ما كنت أعتقد أنه يعني:

timeout=setTimeout('wait();',500);

يبدو أنك تحاول sleep() مع هذا.هذا ليس كيف JS المهلات العمل هذا يحدث onclick في التعليمات البرمجية الخاصة بك:الحلقة من خلال الصور مجموعة التبديل على الفور الصور من 0 إلى 1 ...إلى آخر ؛ أيضا ، على كل مفتاح ، ويقول لك "تشغيل wait() وظيفة ، 500 مللي من الآن".

window.setTimeout(foo,bar,baz) هل هذا:فإنه يحدد توقيت bar ميلي ثانية يعود.تنفيذ التعليمات البرمجية تواصل مع التالي.بعد bar ميلي ثانية, وظيفة foo(baz) هو التلقائى يسمى.3 و الحجج التالية setTimeout اختيارية و سيتم تمريرها إلى الدالة في 1st الحجة.

ما يمكن أن تفعله:

function anim() { 
  var timeout; var next;
  var popuptitle='Movie';
  var main=parent;
  var popup=parent.open("","",
      "width="+main.document.images[0].width+",height="+
      (main.document.images[0].height+40)+
      "toolbar=no,location=no,directories=no,status=no,"+
      "menubar=no,scrollbars=no,copyhistory=no,resizable=no");
  popup.document.write('<html><head><title>'+popuptitle+
    '</title></head><body>'+
    '<p align="center"><img name="anim" width="100%" alt=""></p>'+
    '<p align="center"><button name="close" ' + 
    'onclick="javascript:window.close();">Close</button></p>'+
    '</body></html>');

  // *changed below*
  // start the animation with the 0th image
  next_image(0,main.document.images,popup.document.images[0]);
}

function next_image(index,source_image_array,target_image) {
    // if not at end of array
    if (source_image_array.length < index) { 
        next=source_image_array[index].src;
        target_image.src=next;

        // do this again in 500 ms with next image
        window.setTimeout(next_image,500, index+1 ,
                            source_image_array,target_image);
    }
}

هذه الطريقة في نهاية الخاص بك anim() وظيفة اتصل next_image(0), الذي يضع صورة 0 في مجموعة مجموعات توقيت الاتصال next_image(1) في 500 مللي ثانية.وعندما يحدث ذلك ، فإن الصورة سوف يتم تعيين إلى 1 و الموقت سيتم تعيين الاتصال next_image(2) في آخر 500 ms, وهلم جرا, حتى لا يوجد المزيد من الصور في الصفيف.

نصائح أخرى

هذه ليست إجابة مباشرة على سؤالك, ولكن باستخدام جافا سكريبت الإطار مسج و البرنامج المساعد, يمكنك بسهولة الحصول على صورة عرض الشرائح.أعتقد أنه من الرائع أن كنت تريد أن تتعلم جافا سكريبت من الأسباب ، ولكن سوف مسج+البرنامج المساعد الطريق يمكن أن يوفر لك ساعات كثيرة.هيك, حتى إذا كنت تريد أن ديي ، ما زال أنصح باستخدام مسج لأنه يجعل دوم التلاعب أسهل بكثير.

إلى Piskvor:شكرا لك على الرد, هذا هو بالضبط ما كنت بحاجة إلى معرفة:

setTimeout(foo,bar,baz) هل هذا:فإنه يحدد توقيت bar ميلي ثانية يعود.تنفيذ التعليمات البرمجية تواصل مع التالي.بعد bar ميلي ثانية, وظيفة foo(baz) هو التلقائى يسمى.3 و الحجج التالية setTimeout اختيارية و سيتم تمريرها إلى الدالة في 1st الحجة.

لذا هنا يتبع تصحيح سبيل المثال ؛ وآمل أن يساعد الآخرين قوقل ;-)

<html>
<head>
<script language="javascript">
function display(img,i, popup) {
  var next; var after_ms=750; var max=img.length;
  if(i>=max) i=0;  /* so we can cycle infinitely */
  next=img[i].src; popup.document.images[0].src=next;
  setTimeout(display,(i+1<max?after_ms:4*after_ms), img,i+1,popup);
}
function anim() {
  var popuptitle='Movie';
  var popup_properties="width="+document.images[0].width+
      ",height="+(document.images[0].height+40)+
      ",toolbar=no,location=no,directories=no,status=no"+
      ",menubar=no,scrollbars=no,copyhistory=no,resizable=no"
  var popup=parent.open("", popuptitle, popup_properties);
  popup.document.write('<html><head><title>'+popuptitle+'</title></head><body>'+
    '<p align="center"><img name="anim" width="100%" alt=""></p>'+
    '<p align="center"><button name="close" onclick="javascript:window.close();">Close</button></p>'+
    '</body></html>');
  display(document.images,0, popup);
}
</script>
</head>
<body><h1>Pictures + animation</h1>
<p><button name="exec" onclick="javascript:anim();">Animate (popup)</button></p>
<p><img name="1"  src="img1.jpg"></p>
// .... 
<p><img name="16" src="img16.jpg"></p>
</body>
</html>

ماذا تعلمت أيضا:

  1. على while(true) هو الشر ، يجعل المتصفح تعليق.بدلا من ذلك, لقد استعملت شرط في anim() وظيفة الذي يحدد المؤشر إلى الصفر عندما تصل إلى نهاية.
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top