JS小功能(offsetLeft实现图片滚动效果)实例代码
更新时间:2013年11月28日 15:02:47 作者:
这篇文章主要介绍了offsetLeft实现图片滚动效果实例代码,有需要的朋友可以参考一下
效果:
代码:
复制代码 代码如下:
<head runat="server">
<title></title>
<style type="text/css">
#div1
{
width: 245px;
height: 150px;
background: red;
margin: 250px;
margin-left: 500px;
position: absolute;
overflow: hidden;
}
#div1 ul li
{
float: left;
width: 44px;
height: 66px;
margin-top: 20px;
margin-right: 5px;
list-style: none;
}
#div1 ul
{
width: 250px;
position: absolute;
padding: 0;
}
</style>
<script type="text/javascript">
window.onload = function () {
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';
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);
odiv.onmouseover = function () {
clearInterval(timer);
}
odiv.onmouseout = function () {
timer = setInterval(roll, 30);
}
};
</script>
</head>
<body>
<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>
</body>
您可能感兴趣的文章:
- 基于js中style.width与offsetWidth的区别(详解)
- js获取元素的偏移量offset简单方法(必看)
- 详解原生js实现offset方法
- JavaScript中offsetWidth的bug及解决方法
- JavaScript中style.left与offsetLeft的使用及区别详解
- javascript中offset、client、scroll的属性总结
- JavaScript中的getTimezoneOffset()方法使用详解
- js实现jquery的offset()方法实例
- Javascript 运动中Offset的bug解决方案
- javascript中style.left和offsetLeft的用法说明
- JS OffsetParent属性深入解析
- JS中offset和匀速动画详解
相关文章
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
今天小编就为大家分享一篇layui+SSM的数据表的增删改实例(利用弹框添加、修改),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09小程序中使用css var变量(使js可以动态设置css样式属性)
这篇文章主要介绍了小程序中使用css var变量,使js可以动态设置css样式属性,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2020-03-03JS中mouseover和mouseout多次触发问题如何解决
这篇文章主要介绍了JS中mouseover和mouseout多次触发问题如何解决的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下2016-06-06JavaScript中json数组查找数据的几种方式(含模糊查找)
这篇文章主要给大家介绍了关于JavaScript中json数组查找数据的几种方式,文中包括模糊查找,文中给出了详细的代码示例,对大家学习或者使用json具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
最新评论