Форум

galileopro · #11 (**permalink**) 25.04.2009, 20:13

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

x-yuri · #12 (**permalink**) 26.04.2009, 03:09

давай для начала воспользуемся тэгами для орформления кода (html в твоем случае, есть иконка на панели инструментов) + добавь отступы, а то ничего не понятно

galileopro · #13 (**permalink**) 26.04.2009, 09:54

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

Riim · #14 (**permalink**) 26.04.2009, 10:00

Интересно, найдется, кто ни будь, у кого хватит терпения объяснить, как пользоваться тегами.

galileopro · #15 (**permalink**) 26.04.2009, 10:08

имешь в виду использовать теги
? А отступы я ставил везде, но они почему-ть не отобразились

Riim · #16 (**permalink**) 26.04.2009, 10:30

О, я вижу смайл. Прогресс.

Gvozd · #17 (**permalink**) 26.04.2009, 10:32

:WALL:
galileopro,
иелись в виду BB-теги при написании сообщений.
когда ты пишеш сообщение, то у тебя рядом есть несколько кнопочек.
если ты выделиш HTML-код в своем сообшении, и нажмеш кнопку с угловыми скобками, то получиш:

<html>
    </html>

а если со свертком, то получиш

alert('Java Script');

galileopro · #18 (**permalink**) 26.04.2009, 10:54

Вот упрощенный вариант кода с той же проблемой. Здесь картинка "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>

galileopro · #19 (**permalink**) 26.04.2009, 10:58

Спасибо Gvozd. Ну вроде-бы выделился скрипт...

x-yuri · #20 (**permalink**) 26.04.2009, 18:15

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)

Цитата:

Вот ссылка на работающее приложение

я имел в виду не ссылку на файлообменник, а на страницу, которая не работает, чтобы прямо в inet'е можно было посмотреть... но уже не нужно

Форум

Справочник

Discord чат

Курсы javascript