效果:
代码:
复制代码代码如下:
<head runat="servidor">
<título></título>
<style type="texto/css">
#div1
{
largura: 245px;
altura: 150px;
fundo: vermelho;
margem: 250px;
margem esquerda: 500px;
posição: absoluta;
estouro: oculto;
}
#div1 ul li
{
flutuar: esquerda;
largura: 44px;
altura: 66px;
margem superior: 20px;
margem direita: 5px;
estilo de lista: nenhum;
}
#div1ul
{
largura: 250px;
posição: absoluta;
preenchimento: 0;
}
</estilo>
<script type="texto/javascript">
janela.onload=função(){
var oul = document.getElementsByTagName('ul')[0];
var odiv = document.getElementById('div1');
var ali = document.getElementsByTagName('li');
oul.innerHTML = oul.innerHTML + oul.innerHTML;
oul.style.width = (ali[0].offsetWidth + 5) * ali.length + 'px';
função rolar() {
if (oul.offsetLeft <= -oul.offsetWidth / 2) {
oul.style.left = '0';
}
oul.style.left = oul.offsetLeft - 2 + 'px';
}
var temporizador = null;
temporizador = setInterval(roll, 30);
odiv.onmouseover=função(){
clearInterval(temporizador);
}
odiv.onmouseout=função(){
temporizador = setInterval(roll, 30);
}
};
</script>
</head>
<corpo>
<divid="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>
</body>