Demo działania kilkuwarstwowego ScrollBanera

Style

#ScrollBaner {position:relative; width:100%; height:500px;}
#ScrollBaner .Baner {position:absolute; left:0; top:0; width:100%; height:500px;}
#ScrollBaner #Baner1 {background:url(img/baner-1.png);}
#ScrollBaner #Baner2 {background:url(img/baner-2.png);}
#ScrollBaner #Baner3 {background:url(img/baner-3.png);}
#ScrollBaner #Baner4 {background:url(img/baner-4.png);}

Kontener na baner w sekcji BODY

<div id="ScrollBaner">
	<div class="Baner" id="Baner1"></div>
	<div class="Baner" id="Baner2"></div>
	<div class="Baner" id="Baner3"></div>
	<div class="Baner" id="Baner4"></div>
</div>

Skrypt JavaScript z prostą pętlą do obsługi ScrollBanera

// ID, CURRENT POSITION, SPEED, WIDTH
var aBaner=new Array();
aBaner[0]=["Baner1",0,1.0,1400];
aBaner[1]=["Baner2",0,1.5,1200];
aBaner[2]=["Baner3",0,2.0,1233];
aBaner[3]=["Baner4",0,2.5,1400];

function ScrollBaner() {
	for(i in aBaner) {
		var cDX=aBaner[i][1]-aBaner[i][2];
		if (cDX<-aBaner[i][3]) cDX+=aBaner[i][3];
		aBaner[i][1]=cDX;
		document.getElementById(aBaner[i][0]).style.backgroundPosition=cDX+"px 0";
	}
	setTimeout("ScrollBaner()",20);
}

ScrollBaner();