Javascript: всплывающее окно с фильмом из изображений в главном окне

Я в основном новичок Javascript'er, и я пробую его на веб-странице, которая, нажав кнопку, всплывает окно, которое показывает циклический «фильм», с изображениями из главного окна. Из того, что я пробовал в Googling, я чувствую, что я довольно близко, но что-то ускользает от меня.Javascript: всплывающее окно с фильмом из изображений в главном окне

Я знаю, что следует за результатами в двух отдельных вопросах, которые заслуживают двух отдельных сообщений. Но я полагаю, что оба они связаны с одной и той же проблемой/целью, возможно, это относится к одному (хотя и длинному) сообщению. Поэтому я надеюсь, что размер его не 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>

я напечатал/адаптировали для релевантности; Надеюсь, я не сделал никаких опечаток ...

Я работаю с Debian Etch's Iceweasel (Firefox 2.x rebrand); Я не пробовал это с другими браузерами. В Iceweasel происходит следующее:

Всплывающее окно появляется, как предполагается, но кажется, что цикл идет прямо к последней картине. setTimeout, похоже, не влияет на «паузу» между картинками.
Последний снимок отображается, и в строке состояния всплывающего окна отображается индикатор выполнения на середине, предлагая что-то загружать.

Так что мои вопросы:

Как именно я должен использовать setTimeout вызов здесь? Я попытался заставить его вызвать «пустую» функцию, поэтому он работает как «пауза» в цикле с setTimeout(), где цикл обновляет всплывающее одиночное изображение из массива изображений главного окна.
Я нахожу, что если я загружу всплывающее окно, загрузив код HTML из внешнего файла (anim.html), строка состояния, похоже, отобразится из «индикатора выполнения», что окно ожидает ожидание перезагрузки. Я все еще собираюсь попробовать, если это где-то в другом месте, но я хочу знать, важно ли/важно, чтобы я загружал HTML-страницу из внешнего файла с помощью window.open(), а также загружал пустое окно и делал для него запись «написать» HTML.
Я прокомментировал while(true) в цикле, потому что в противном случае браузер перестает отвечать на запросы, а компьютер переходит на 100% процессор. Я мог бы сделать if в цикле for, чтобы установить счетчик обратно до нуля до последнего элемента, но есть ли еще один «элегантный» или «более подходящий» способ сделать это бесконечным циклом - или действительно ли while(true) прекрасно?

Представляю ваши комментарии заранее и, если возможно, указатель на существующую библиографию, описывающую подобные решения.

источник

2009-03-28 jbatista

Я не думаю, что это означает, что вы думаете, что значит:

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

Судя по всему, вы пытаетесь sleep() с этим. Это не так, как работает JS timeouts - это происходит в вашем коде onclick: вы просматриваете массив изображений, сразу переключаете изображения с 0-го на 1-й ...длиться; также, на каждом коммутаторе, вы говорите: «Запустите функцию wait(), через 500 мс».

window.setTimeout(foo,bar,baz) делает это: он устанавливает таймер для bar миллисекунд и возвращается. Выполнение кода продолжается со следующим утверждением. После bar миллисекунд функция foo(baz) автоматом называется. Третий и следующие аргументы для setTimeout являются необязательными и будут переданы функции в 1-м аргументе.

Что вы можете сделать:

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 мс и т. д., пока в массиве больше нет изображений.

источник

2009-03-28 11:44:44 Piskvor

Это не прямой ответ на ваш вопрос, но с использованием рамки JavaScript jQuery и plugin вы можете легко получить слайд-шоу изображений. Я думаю, что здорово, что вы хотите изучить JavaScript с нуля, но переход к плану jQuery + плагин может сэкономить вам много, много часов. Черт, даже если вы хотите сделать DIY, я бы по-прежнему рекомендовал использовать jQuery, потому что это облегчает манипуляции с DOM.

источник

2009-03-28 12:20:55 BeefTurkey

Для Piskvor: Спасибо за Ваш ответ, это именно то, что мне нужно знать:

setTimeout(foo,bar,baz) делает это: он устанавливает таймер на bar миллисекунд и возвращается. Выполнение кода продолжается со следующим утверждением. После bar миллисекунд функция foo(baz) автоматом называется. Третий и следующие аргументы для setTimeout являются необязательными и будут переданы функции в 1-м аргументе.

Итак, здесь следует скорректированный пример; Я надеюсь, что это помогает другим Googlers ;-)

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

То, что я также узнал:

while(true) зло, это делает браузер зависнуть. Вместо этого я использовал условие в функции anim(), которая возвращает индекс к нулю, когда он достигает конца.

источник

2009-03-28 13:35:03 jbatista

Javascript: всплывающее окно с фильмом из изображений в главном окне

ответ

Смежные вопросы