O.k., her kommer den færdige udgave så - med tilfældige skift:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Filmstrimmel</title>
<script type="text/javascript">
mintid = 3; //Minimum antal sekunder mellem hvert skift
makstid = 10; //Maksimum antal sekunder mellem hvert skift
bill = new Array();
bill[0] = new Array();
bill[0][0] = "bill1-1.gif"; //Det første billede på den første plads
bill[0][1] = "bill1-2.gif"; //Det andet billede på den første plads
bill[0][2] = "bill1-3.gif"; //Det tredje billede på den første plads
bill[1] = new Array();
bill[1][0] = "bill2-1.gif"; //Det første billede på den anden plads
bill[1][1] = "bill2-2.gif"; //Det andet billede på den anden plads
bill[1][2] = "bill2-3.gif"; //Det tredje billede på den anden plads
bill[2] = new Array();
bill[2][0] = "bill3-1.gif"; //Det første billede på den tredje plads
bill[2][1] = "bill3-2.gif"; //osv.
bill[2][2] = "bill3-3.gif";
bill[3] = new Array();
bill[3][0] = "bill4-1.gif";
bill[3][1] = "bill4-2.gif";
bill[3][2] = "bill4-3.gif";
bill[4] = new Array();
bill[4][0] = "bill5-1.gif";
bill[4][1] = "bill5-2.gif";
bill[4][2] = "bill5-3.gif";
bill[5] = new Array();
bill[5][0] = "bill6-1.gif";
bill[5][1] = "bill6-2.gif";
bill[5][2] = "bill6-3.gif";
bill[6] = new Array();
bill[6][0] = "bill7-1.gif";
bill[6][1] = "bill7-2.gif";
bill[6][2] = "bill7-3.gif";
bill[7] = new Array();
bill[7][0] = "bill8-1.gif";
bill[7][1] = "bill8-2.gif";
bill[7][2] = "bill8-3.gif";
bill[8] = new Array();
bill[8][0] = "bill9-1.gif";
bill[8][1] = "bill9-2.gif";
bill[8][2] = "bill9-3.gif";
pb = new Array();
for (i = 0; i < bill.length; i++) {
pb[i] = new Array();
for (n = 0; n < bill[i].length; n++) {
pb[i][n] = new Image();
pb[i][n].src = bill[i][n];
}
}
bobj = new Array();
bt = new Array();
ie = (document.all && navigator.appName.indexOf("Opera") == -1);
function initSlide() {
obj = document.getElementById("strimmel");
x = y = 0;
while (ie && obj.parentElement || obj.offsetParent) {
x += obj.offsetLeft;
y += obj.offsetTop;
obj = (ie) ? obj.parentElement : obj.offsetParent;
}
for (i = 0; i < bill.length; i++) {
bobj[i] = new Array();
bobj[i][0] = bobj[i][1] = document.createElement("img");
bobj[i][0].style.position = bobj[i][1].style.position = "absolute";
bobj[i][0].style.left = bobj[i][1].style.left = x + 6 + i * 111;
bobj[i][0].style.top = bobj[i][1].style.top = y + 22;
bobj[i][0].style.width = bobj[i][1].style.width = "102px";
bobj[i][0].style.height = bobj[i][1].style.height = "67px";
bobj[i][0].style.zIndex = 3;
bobj[i][1].style.zIndex = 2;
if (ie)
bobj[i][0].style.filter = bobj[i][1].style.filter = "alpha(opacity=100)";
else
bobj[i][0].style.MozOpacity = bobj[i][1].style.MozOpacity = 1;
bobj[i][0].src = pb[i][0].src;
bt[i] = 1;
document.body.appendChild(bobj[i][0]);
document.body.appendChild(bobj[i][1]);
}
for (i = 0; i < bill.length; i++)
setTimeout("slide(" + i + ")", tilf());
}
function slide(i) {
if (bt[i] >= bill[i].length)
bt[i] = 0;
akt = bt[i] % 2;
bobj[i][1 - akt].src = pb[i][bt[i]].src;
for (n = 1; n <= 10; n++) {
if (ie)
setTimeout("bobj[" + i + "][" + akt + "].filters.alpha.opacity = " + (10 * n), 100 * (n - 1));
else
setTimeout("bobj[" + i + "][" + akt + "].style.MozOpacity = " + (n / 10), 100 * (n - 1));
}
setTimeout("bobj[" + i + "][" + akt + "].style.zIndex = 2; bobj[" + i + "][" + (1 - akt) + "].style.zIndex = 3", 1000);
bt[i]++;
setTimeout("slide(" + i + ")", tilf());
}
function tilf() {
return Math.round((Math.random() * (makstid - mintid) + mintid) * 1000);
}
</script>
</head>
<body>
<img src="
http://www.jasperfoto.dk/ole/strimmel.jpg" id="strimmel" style="width: 1000px; height: 123px; z-index: 1;" onload="initSlide();" />
</body>
</html>
Evt. kan du skifte tilf-funktionen ud med nedenstående, hvis du hellere vil have skiftene til at ske på hele sekundintervaller (så ser det ikke så rodet ud):
function tilf() {
return Math.round(Math.random() * (makstid - mintid) + mintid) * 1000;
}
