JS小功能实例代码
本文主要介绍offsetLeft实现图片滚动效果实例代码，感兴趣朋友可以研究研究！
复制代码 代码如下:
<head runat="server">
<title></title>
<style type="text/css">
#p1
{
width: 245px;
height: 150px;
background: red;
margin: 250px;
margin-left: 500px;
position: absolute;
overflow: hidden;
}
#p1 ul li
{
float: left;
width: 44px;
height: 66px;
margin-top: 20px;
margin-right: 5px;
list-style: none;
}
#p1 ul
{
width: 250px;
position: absolute;
padding: 0;
}
</style>
<script type="text/javascript">
window.onload = function () {
var oul = document.getElementsByTagName('ul')[0];
var op = document.getElementById('p1');
var ali = document.getElementsByTagName('li');
oul.innerHTML = oul.innerHTML + oul.innerHTML;
oul.style.width = (ali[0].offsetWidth + 5) * ali.length + 'px';
function roll() {
if (oul.offsetLeft <= -oul.offsetWidth / 2) {
oul.style.left = '0';
}
oul.style.left = oul.offsetLeft - 2 + 'px';
}
var timer = null;
timer = setInterval(roll, 30);
op.onmouseover = function () {
clearInterval(timer);
}
op.onmouseout = function () {
timer = setInterval(roll, 30);
}
};
</script>
</head>
<body>
<p id="p1">
<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>
</p>
</body>
- 上一篇：使用PHP备份MySQL和网站发送到邮箱实例代码
- 下一篇：JS小功能简单实现
