Мопогите разобраться. Вот код и ссылка на исходник слайдшоу, где картинки меняют друг друга постепенно затухая(предыдущая затухает, последующая появляется). Но постепенно затухание необоснованно ускоряется и все портится((Картинки меняются слишком быстро и затухание вообще не заметно. Я уже ставил setTimeout на 1000 мс перед каждой перерисовкой, но все равно это лишь вопрос времени. Постепенно оно ускоряется до неимоверности...
Вот код: <script> var slide = new Array; var pictureName = new Array("scrin1.jpg", "scrin2.jpg", "scrin3.jpg", "scrin4.jpg","scrin5.jpg", "img3.jpg"); for (var i = 0; i < pictureName.length; i++) { slide[i] = new Image(); slide[i].src = pictureName[i]; } var l=100; var k=0; var i=0; function next(){ l=l-1; document.getElementById("before").width=400; document.getElementById("before").height=300; document.getElementById("before_div").style.filter ="alpha(opacity="+l+")"; k++; document.getElementById("after").width=400; document.getElementById("after").height=300; document.getElementById("after_div").style.filter ="alpha(opacity="+k+")"; setTimeout("next()",50); if(k==100)return; } function Slaid(){ if(i<=4){ l=100; k=0; document.getElementById("before").src=pictureName[i]; i++ document.getElementById("after").src=pictureName[i]; next(); } if(i==5){ l=100; k=0; document.getElementById("before").src=pictureName[i]; i=0; document.getElementById("after").src=pictureName[i]; next(); } setTimeout('Slaid()',5000); } </script> <style> .pic { position: absolute; top: 40px; left: 10px } </style> <body onload="setTimeout('Slaid()',1000)"> <body bgcolor="deepskyblue" text="blue" link="yellow" vlink="gold"> <p align=center>Баннер "Затухание"</p> <div id="before_div" class="pic"><img id="before" src="scrin1.jpg" width=400 height=300></div> <div id="after_div" class="pic"><img id="after" src="scrin2.jpg" width=400 height=300></div> <br><br><br><br><br><br><br><br><br><br><br><br><b r><br><br><br> <p><a href="Baners.html">Назад</a></p> </body> Вот ссылка на работающее приложение: http://letitbit.net/download/81eb65b...hanie.rar.html http://letitbit.net/download/81eb65b...hanie.rar.html |
давай для начала воспользуемся тэгами для орформления кода (html в твоем случае, есть иконка на панели инструментов) + добавь отступы, а то ничего не понятно ;)
|
<doctype html Public "_//w3c// DTD html 4.0 Frameset//En"
"_The_latest_version_/frameset.dta"> <html> <head> <title>Затухание слайдов</title> <script> var slide = new Array; var pictureName = new Array("scrin1.jpg", "scrin2.jpg", "scrin3.jpg", "scrin4.jpg","scrin5.jpg", "img3.jpg"); for (var i = 0; i < pictureName.length; i++) { slide[i] = new Image(); slide[i].src = pictureName[i]; } var l=100; var k=0; var i=0; function next(){ l=l-1; document.getElementById("before").width=400; document.getElementById("before").height=300; document.getElementById("before_div").style.filter ="alpha(opacity="+l+")"; k++; document.getElementById("after").width=400; document.getElementById("after").height=300; document.getElementById("after_div").style.filter ="alpha(opacity="+k+")"; setTimeout("next()",50); if(k==100)return; } function Slaid(){ if(i<=4){ l=100; k=0; document.getElementById("before").src=pictureName[i]; i++ document.getElementById("after").src=pictureName[i]; next(); } if(i==5){ l=100; k=0; document.getElementById("before").src=pictureName[i]; i=0; document.getElementById("after").src=pictureName[i]; next(); } setTimeout('Slaid()',5000); } </script> <style> .pic { position: absolute; top: 40px; left: 10px } </style> <body onload="setTimeout('Slaid()',1000)"> <div id="before_div" class="pic"><img id="before" src="scrin1.jpg" width=400 height=300></div> <div id="after_div" class="pic"><img id="after" src="scrin2.jpg" width=400 height=300></div> </body> </html> |
Интересно, найдется, кто ни будь, у кого хватит терпения объяснить, как пользоваться тегами.
|
имешь в виду использовать теги
? А отступы я ставил везде, но они почему-ть не отобразились:-? |
О, я вижу смайл. Прогресс.
|
:WALL:
galileopro, иелись в виду BB-теги при написании сообщений. когда ты пишеш сообщение, то у тебя рядом есть несколько кнопочек. если ты выделиш HTML-код в своем сообшении, и нажмеш кнопку с угловыми скобками, то получиш: <html> </html> а если со свертком, то получиш alert('Java Script'); |
Вот упрощенный вариант кода с той же проблемой. Здесь картинка "scrin1.jpg" меняется на "scrin2.jpg" причем первая постепенно затухает, а вторая постепенно появляется, но постепенно выполнение скрипта самопроизвольно ускоряется и затухание становится практически незаметым. Если кто-нибудь знает как исправить - напишите.
<doctype html Public "_//w3c// DTD html 4.0 Frameset//En" "_The_latest_version_/frameset.dta"> <html> <head> <title>Затухание слайдов</title> <script> var l=100; var k=0; function next(){ l=l-1; document.getElementById("before").width=400; document.getElementById("before").height=300; document.getElementById("before_div").style.filter ="alpha(opacity="+l+")"; k++; document.getElementById("after").width=400; document.getElementById("after").height=300; document.getElementById("after_div").style.filter ="alpha(opacity="+k+")"; setTimeout("next()",50); if(k==100)return; } function Slaid(){ l=100; k=0; document.getElementById("before").src="scrin1.jpg"; document.getElementById("after").src="scrin2.jpg"; setTimeout('next()',500); setTimeout('Slaid()',5000); } </script> <style> .pic { position: absolute; top: 40px; left: 10px } </style> <body onload="setTimeout('Slaid()',1000)"> <div id="after_div" class="pic"><img id="after" src="scrin1.jpg" width=400 height=300></div> <div id="before_div" class="pic"><img id="before" src="scrin2.jpg" width=400 height=300></div> </body> </html> |
Спасибо Gvozd. Ну вроде-бы выделился скрипт...:no:
|
1) лучше не использовать глобальных переменных:
function next(){ ... document.getElementById("before_div").style.filter ="alpha(opacity="+arguments.callee.i+")"; ... function Slaid(){ ... next.i = 0; setTimeout('next()',500); ... 2) фильтры есть только в ie 3) if(k==100)return; то же самое, что if(k==100); то же самое что // ;) 4) Цитата:
|
Часовой пояс GMT +3, время: 12:54. |