Hola
junihh
Aquí tienes un arreglo:
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1;charset=windows-1252" />
<title>Probando scroll objetos</title>
<style type="text/css">
<!--
html, body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6, pre, input,
p, blockquote, th, td, img {
margin: 0;
padding: 0;
border: 0;
}
ul {
list-style: none;
margin: 0px;
padding: 0px;
}
.main {
margin: 30px auto;
width: 300px;
}
.clear { clear: both; }
div#sldCnt {
width: 300px;
}
ul#sldObj {
display: block;
}
ul#sldObj li.sldItm {
width: 300px;
height: 200px;
float: left;
}
div.sldNxtPrv {
position: relative;
margin-top: -25px;
padding: 0 8px 0 8px;
height: 26px;
background: url(index_files/hom_bckg.png);
zoom: 1;
}
/* empiezan los cambios */
div#sldTit {
color: #FFF;
position: absolute;
left: 4px;
margin-top: 3px;
zoom: 1;
}
div#sldPrv {
width: 18px;
position: absolute;
top: 4px;
right: 25px;
height: 16px;
zoom: 1;
}
div#sldNxt {
width: 18px;
position: absolute;
top: 4px;
right: 4px;
height: 16px;
zoom: 1;
}
/* finalizan los cambios */
div#sldPrv {
background: url(index_files/hom_bot_.gif) no-repeat scroll 0 0;
}
div#sldPrv:hover {
background: url(index_files/hom_bot_.gif) no-repeat scroll 0 -16px;
cursor: pointer;
}
div#sldNxt {
background: url(index_files/hom_bot_.gif) no-repeat scroll -18px 0;
}
div#sldNxt:hover {
background: url(index_files/hom_bot_.gif) no-repeat scroll -18px -16px;
cursor: pointer;
}
-->
</style>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
</head>
<body>
<div class="main">
<div id="sldCnt">
<ul id="sldObj">
<li class="sldItm"><img src="index_files/01000000.jpg" width="300" height="200" /></li>
<li class="sldItm"><img src="index_files/02000000.jpg" width="300" height="200" /></li>
<li class="sldItm"><img src="index_files/03000000.jpg" width="300" height="200" /></li>
</ul>
<div class="clear"></div>
<div class="sldNxtPrv">
<div id="sldTit">El titulo</div>
<div id="sldNxt"><img src="index_files/spacer00.gif" alt="Anterior" width="18" height="16" /></div>
<div id="sldPrv"><img src="index_files/spacer00.gif" alt="Siguiente" width="18" height="16" /></div>
</div>
<div>
</div>
<div id="ver"></div>
<script type="text/javascript" language="javascript">
function setSlider (idCn,idOb,idPr,idNx,clItm,w,h)
{
if ( !document.getElementById(idOb) ) return;
//
var cnt = document.getElementById(idCn);
var obj = document.getElementById(idOb);
var bPr = document.getElementById(idPr);
var bNx = document.getElementById(idNx);
var allLi = cnt.getElementsByTagName('li'), allLiCn = allLi.length;
var itmLi = [], itmNx = 0, itmCn = 0, itmLiPs = [], itmLiGo = 0;
var obInt, obPos = 0;
//
for (var i = 0; i < allLiCn; i++)
{
if (String(allLi[i].className).indexOf(clItm) != -1)
{
itmLi[itmNx] = allLi[i];
itmLiPs[itmNx] = itmNx * w;
itmNx++;
};
};
//
itmCn = itmLi.length;
cnt.style.overflow = 'hidden';
cnt.style.position = 'absolute';
obj.style.position = 'relative';
obj.style.width = (w * itmCn) + 'px';
//
clearInterval (obInt);
obInt = setInterval (function ()
{
obPos += (itmLiPs[itmLiGo] - obPos) / 4;
obj.style.left = (0 - obPos) + 'px';
}, 30);
//
bPr.onclick = function () { if (itmLiGo <= 0) { itmLiGo = (itmCn-1); } else { itmLiGo--; }; };
bNx.onclick = function () { if (itmLiGo >= (itmCn-1)) { itmLiGo = 0; } else { itmLiGo++; }; };
};
setSlider ('sldCnt','sldObj','sldPrv','sldNxt','sldItm',300,200);
</script>
<!-- te faltan estos dos cierres de div -->
</div>
</div>
</body>
</html> He comentado los cambios en el código fuente (además te faltaban dos cierres de divs al final del html -aunque esto no tiene nada que ver con la solución-).
Otra cosa: la meta emulate se debe colocar justo después de <head>.
Saludos
