Требовалось написать слайдшоу. Главное условие - "лёгкость".
Я только начал осваивать js, да и программирование в целом, поэтому первый вариант был таков:
var i1=new Image(); i1.src="img/slideshow1/i1.jpg";
var i2=new Image(); i2.src="img/slideshow1/i2.jpg";
var i3=new Image(); i3.src="img/slideshow1/i3.jpg";
var i4=new Image(); i4.src="img/slideshow1/i4.jpg";
var i5=new Image(); i5.src="img/slideshow1/i5.jpg";
var i6=new Image(); i6.src="img/slideshow1/i6.jpg";
var i7=new Image(); i7.src="img/slideshow1/i7.jpg";
var i8=new Image(); i8.src="img/slideshow1/i8.jpg";
function op() { setTimeout("op9()",4000); }
function op9() { document.images.slide.style.opacity=0.9; setTimeout("op8()",speed); }
function op8() { document.images.slide.style.opacity=0.8; setTimeout("op7()",speed); }
function op7() { document.images.slide.style.opacity=0.7; setTimeout("op6()",speed); }
function op6() { document.images.slide.style.opacity=0.6; setTimeout("op5()",speed); }
function op5() { document.images.slide.style.opacity=0.5; setTimeout("op4()",speed); }
function op4() { document.images.slide.style.opacity=0.4; setTimeout("op3()",speed); }
function op3() { document.images.slide.style.opacity=0.3; setTimeout("op2()",speed); }
function op2() { document.images.slide.style.opacity=0.2; setTimeout("op1()",speed); }
function op1() { document.images.slide.style.opacity=0.1; setTimeout("slide()",speed); }
function slide() { if (!document.images) return; document.images.slide.src=eval("i"+step+".src"); if (step<8) step++; else step=1; setTimeout("o2()",speed); }
function o2() { document.images.slide.style.opacity=0.2; setTimeout("o3()",speed); }
function o3() { document.images.slide.style.opacity=0.3; setTimeout("o4()",speed); }
function o4() { document.images.slide.style.opacity=0.4; setTimeout("o5()",speed); }
function o5() { document.images.slide.style.opacity=0.5; setTimeout("o6()",speed); }
function o6() { document.images.slide.style.opacity=0.6; setTimeout("o7()",speed); }
function o7() { document.images.slide.style.opacity=0.7; setTimeout("o8()",speed); }
function o8() { document.images.slide.style.opacity=0.8; setTimeout("o9()",speed); }
function o9() { document.images.slide.style.opacity=0.9; setTimeout("o1()",speed); }
function o1() { document.images.slide.style.opacity=1; setTimeout("op9()",2500); }
Несмотря на дикость кода, он работал чётко и насиловал процессор в три раза меньше, чем его аналог на jQuery (стоит отметить, что на jQuery код получился гораздо изящнее в исполнении, но я от него отказался).
И вот последняя редакция первого варианта кода. Вроде всё должно работать, но почему-то функция slidePic() не хочет вызывать саму себя (т.е. происходит только первый вызов из функции loadPic()), хотя уже был опыт использования подобной рекурсии. Подозреваю, что дело может быть в setTimeout(), но медитация и курение мануалов пока не принесли результатов:
var step=2;
var speed=80;
var pic=new Object();
var countPic=8;
var arrPic=new Array();
var opc=9; var nav=0;
var app=navigator.appVersion.indexOf("MSIE");
function loadPic()
{
pic=document.getElementById("sl");
for(i=1;i<countPic+1;i++)
{
arrPic[i]=new Image();
arrPic[i].src="img/slideshow1/i"+i+".jpg";
}
setTimeout(slidePic,2500);
}
function slidePic()
{
op=opc/10;
pic.style.opacity=op;
if(app>=0){op*=100;
document.getElementById("sl").style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+op+")";}
else pic.style.opacity=op;
if(nav==0)
{
if(opc==0)
{
pic.src=arrPic[step].src;
if(step==countPic) step=1;
else step++;
opc=1; nav=1;
setTimeout(slidePic,speed);
}
else
{
opc--;
setTimeout(slidePic,speed);
}
}
else
{
if(opc==10)
{
opc=9; nav=0;
setTimeout(slidePic,2500);
}
else
{
opc++;
setTimeout(slidePic,speed);
}
}
}
Фрагмент html-разметки (в первом варианте по onload запускалась функция op()):
<body onload="loadPic()"><!--other content-->
<img src="img/slideshow1/i1.jpg" id="sl" name="slide"><!--other content--></body>
Не знаю как отловить ошибку.
И, конечно, буду благодарен за указания по оптимизации этого кода.