Te mando un ejemplo con dos tiras de imagenes con diferente ancho, despues puedes poner todas las tiras que quieras.
He añadido dos nuevos parametros a la función:
P7AniMagic(el, x, y, a, b, c, s, nI,wI)
P7AniMagic('Layer21',50,0,20,1,1,0,3,50)"
nI Numero de images de la tira -1
wI Ancho de las imagenes de esa tira
cuando varias el ancho debes cambiarlo tambien, en el layer que contiene la tira:
<div id="Layer2" style="position:relative; left:52px; top:0px;
width:50px; height:50px; z-index:2; overflow: hidden;">
y en el evento onClick de los botones:
onClick="P7AniMagic('Layer21',
50,0,20,1,1,0,3,
50)"
onClick="P7AniMagic('Layer21',
-50 ,0,20,1,1,0,3,
50)
Hay va el ejemplo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-color: #0066CC;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function P7AniMagic(el, x, y, a, b, c, s, nI,wI) { //v2.5 PVII
var g,elo=el,f="",m=false,d="";x=parseInt(x);y=parseIn t(y);
var t = 'g.p7Magic = setTimeout("P7AniMagic(\''+elo+'\',';
if ((g=MM_findObj(el))!=null) {d=(document.layers)?g:g.style;}else{return;}
if (parseInt(s)>0) {eval(t+x+','+y+','+a+','+b+','+c+',0)",' + s+')');return;}
var xx=(parseInt(d.left))?parseInt(d.left):0;
var yy=(parseInt(d.top))?parseInt(d.top):0;
if(parseInt(c)==1) {x+=xx;y+=yy;m=true;c=0;}
else if (c==2) {m=false;clearTimeout(g.p7Magic);}
else {var i=parseInt(a);
if (eval(g.moved)){clearTimeout(g.p7Magic);}
if (xx<x){xx+=i;m=true;if(xx>x){xx=x;}}
if (xx>x){xx-=i;m=true;if(xx<x){xx=x;}}
if (yy<y){yy+=i;m=true;if(yy>y){yy=y;}}
if (yy>y){yy-=i;m=true;if(yy<y){yy=y;}}}
if (m) {
if((navigator.appName=="Netscape") && parseInt(navigator.appVersion)>4){
xx+="px";yy+="px";
}
nImg=nI
wImg=wI
if ((parseInt(xx)<=0)&&(parseInt(xx)>=-((nImg)*wImg))){
d.left=xx;d.top=yy;g.moved=true;
eval(t+x+','+y+','+a+','+b+','+c+',0,'+nImg+','+wI mg+')",'+b+')');
}
}else {g.moved=false;}
}
//-->
</script>
</head>
<body>
<img src="../Images/ZoomLeft.gif" width="16" height="16" onClick="P7AniMagic('Layer11',100,0,20,1,1,0,4,100 )"> <!-- añadido 4,100 4=numero images -1, 100=ancho images-->
<img src="../Images/ZoomRight.gif" width="16" height="16" onClick="P7AniMagic('Layer11',-100,0,20,1,1,0,4,100)"> <!-- añadido 4,100 4=numero images -1, 100=ancho images-->
<div id="Layer1" style="position:relative; left:52px; top:0px; width:100px; height:50px; z-index:2; overflow: hidden;">
<div id="Layer11" style="position:relative; left:0; top:0; width:1000; height:230; z-index:3">
<table id="tabla1" width="50" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="Images/1.jpg" width="100" height="50"></td>
<td><img src="Images/2.jpg" width="100" height="50"></td>
<td><img src="Images/3.jpg" width="100" height="50"></td>
<td><img src="Images/4.jpg" width="100" height="50"></td>
<td><img src="Images/5.jpg" width="100" height="50"></td>
</tr>
</table>
</div>
</div>
<img src="../Images/ZoomLeft.gif" width="16" height="16" onClick="P7AniMagic('Layer21',50,0,20,1,1,0,3,50)" > <!-- añadido "3,50" 3=numero images -1, 50=ancho images-->
<img src="../Images/ZoomRight.gif" width="16" height="16" onClick="P7AniMagic('Layer21',-50,0,20,1,1,0,3,50)"> <!-- añadido "3,50" 3=numero images -1, 50=ancho images-->
<div id="Layer2" style="position:relative; left:52px; top:0px; width:50px; height:50px; z-index:2; overflow: hidden;"> <!-- width=50=ancho images-->
<div id="Layer21" style="position:relative; left:0; top:0; width:1000; height:230; z-index:3">
<table id="tabla1" width="50" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="Images/1.jpg" width="50" height="50"></td>
<td><img src="Images/2.jpg" width="50" height="50"></td>
<td><img src="Images/3.jpg" width="50" height="50"></td>
<td><img src="Images/4.jpg" width="50" height="50"></td>
</tr>
</table>
</div>
</div>
</body>
</html>
Ya me contarás
rsalvadores