效果:
Ejemplo:
复制代码代码如下:
<head runat="servidor">
<título></título>
<tipo de estilo="texto/css">
#div1
{
ancho: 245 px;
altura: 150 px;
fondo: rojo;
margen: 250 px;
margen izquierdo: 500px;
posición: absoluta;
desbordamiento: oculto;
}
#div1 ul-li
{
flotador: izquierda;
ancho: 44px;
altura: 66 píxeles;
margen superior: 20px;
margen derecho: 5px;
estilo de lista: ninguno;
}
#div1ul
{
ancho: 250 px;
posición: absoluta;
relleno: 0;
}
</estilo>
<tipo de script="texto/javascript">
ventana.onload = función () {
var oul = document.getElementsByTagName('ul')[0];
var odiv = document.getElementById('div1');
var ali = document.getElementsByTagName('li');
alma.innerHTML = alma.innerHTML + alma.innerHTML;
oul.style.width = (ali[0].offsetWidth + 5) * ali.length + 'px';
función rollo() {
if (oul.offsetLeft <= -oul.offsetWidth / 2) {
oul.style.left = '0';
}
oul.style.left = oul.offsetLeft - 2 + 'px';
}
temporizador var = nulo;
temporizador = setInterval(rollo, 30);
odiv.onmouseover = función () {
clearInterval(temporizador);
}
odiv.onmouseout = función () {
temporizador = setInterval(rollo, 30);
}
};
</script>
</cabeza>
<cuerpo>
<div id="div1">
<ul>
<li>
<img src="../Images/Number1/0.jpg" /></li>
<li>
<img src="../Images/Number1/1.jpg" /></li>
<li>
<img src="../Images/Number1/2.jpg" /></li>
<li>
<img src="../Images/Number1/3.jpg" /></li>
<li>
<img src="../Images/Number1/4.jpg" /></li>
</ul>
</div>
</cuerpo>