本文介绍了一个简单的HTML页面实现图片跑马灯效果的方法。通过设置div的overflow属性为hidden，配合JavaScript控制图片横向滚动，实现了图片的连续滚动展示。此方法适用于网页设计中需要动态展示多个图片的场景。
转自：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片跑马灯</title>
</head>
<body>
<div style="overflow:hidden; width:350px" id='div'>
<!-- 这里是第一个关键点，overflow 属性规定当内容溢出元素框时发生的事情 -->
<!--
可能的值
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
-->
<table width="308" border="1" align="center">
<tr>
<td >
<div id="div1" style=" display:inline">
<img src="image/01_s.jpg" width="214" height="203" style="display:inline"/><img src="image/02_s.jpg" width="214" height="203" style="display:inline"/><img src="image/03_s.jpg" width="214" height="203"style="display:inline" />
</div>
</td>
<td>
<div id='div2' style=" display:inline">
</div>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
alert(window.screen.availWidth );
document.getElementById('div2').innerHTML=document.getElementById('div1').innerHTML;
function move()
{
if(document.getElementById('div2').offsetWidth-document.getElementById('div').scrollLeft<=0)
{
document.getElementById('div').scrollLeft-=document.getElementById('div2').offsetWidth;
}
document.getElementById('div').scrollLeft+=1;
}
setInterval("move()",10)
</script>
</body>
</html>
扫一扫
2180
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
