效果:
代码:
复制代码代码如下:
<头runat =“服务器”>
<标题></标题>
<样式类型=“文本/css”>
#div1
{
宽度:245px;
高度:150px;
背景:红色;
边距:250 像素;
左边距:500px;
位置:绝对;
溢出:隐藏;
}
#div1 ul li
{
浮动:向左;
宽度:44 像素;
高度:66 像素;
顶部边距:20px;
右边距:5px;
列表样式:无;
}
#div1 ul
{
宽度:250px;
位置:绝对;
填充:0;
}
</风格>
<脚本类型=“文本/javascript”>
window.onload = 函数() {
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';
函数滚动(){
if (oul.offsetLeft <= -oul.offsetWidth / 2) {
oul.style.left = '0';
}
oul.style.left = oul.offsetLeft - 2 + 'px';
}
var 计时器 = null;
计时器 = setInterval(roll, 30);
odiv.onmouseover = 函数 () {
清除间隔(计时器);
}
odiv.onmouseout = 函数 () {
计时器 = setInterval(roll, 30);
}
};
</脚本>
</头>
<正文>
<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>
</正文>