实现图片的无缝滚动

来源：互联网发布：ubuntu chrome 编辑：程序博客网时间：2024/05/01 23:14

HTML部分：

<body><div class="div1"><ul id="ul1"><li><img src="img/a1.jpeg" /></li><li><img src="img/a2.jpeg" /></li><li><img src="img/a3.jpeg" /></li><li><img src="img/a4.jpeg" /></li></ul></div><input type="button" name="btn_up" id="btn_up" value="向上走" /><input type="button" name="btn_down" id="btn_down" value="向下走" /></body>

制作图片的无缝滚动需要定位：

.div1 {position: relative;width: 185px;height: 464px;margin: 100px 500px;border: 1px solid #000;overflow: hidden;}#ul1{position: absolute;top: 0;left: 0;}

JS部分：

<script type="text/javascript">window.onload=function(){//先获取必要的变量var oUl=document.getElementById('ul1');var aLi=oUl.getElementsByTagName('li');var oBtn_Up=document.getElementById('btn_up');var oBtn_Down=document.getElementById('btn_down');//设定它的滚动速度var speed = -20;//innerHTML属性是设置或返回表格行的开始和结束标签之间的 HTML。//将ul标签中的内容复制粘贴一遍oUl.innerHTML += oUl.innerHTML;//声明函数function move(){//判断图片需要跳转的位置点//offsetTop是图片距离ul的距离上边的距离//-oUl.offsetHeight/2是整个ul高度的一般（也就是原本的内容和复制后的内容的交界点）//因为是向上滚动，TOP会变成负数，所以也要加 -if(oUl.offsetTop<-oUl.offsetHeight/2){oUl.style.top=0 + 'px';//当条件满足时top为0，也就是返回最初的位置}//判断向上滚动if(oUl.offsetTop>0){oUl.style.top=-oUl.offsetHeight/2 + 'px';//当条件满足时top值跳到原本的内容和复制后的内容的交界点//也就是从复制的内容开始展示所以看起来是一样的，滚动的。}//判断向下滚动oUl.style.top = oUl.offsetTop + speed + 'px';//滚动值的添加}setInterval(move,100);//setInterval定时器，100为毫秒值，move为要运行的函数名；每100毫秒运行一次oBtn_Up.onclick=function(){//鼠标点击事件speed = -20;}oBtn_Down.onclick=function(){speed = 20;}}</script>

offset家族：
检测盒子宽高：offsetWidth和offsetHight
检测盒子距离左/上位置：offsetLeft和offsetTop
检测盒子的带有定位的父盒子：offsetParent
解释：
offset这个单词本身是--偏移，补偿，位移的意思。
js中有一套方便的获取元素尺寸的办法就是offset家族；
offsetWidth和offsetHight 以及offsetLeft和offsetTop以及offsetParent
共同组成了offset家族。
属性：
offsetWidth 和offsetHight （检测盒子自身宽高+padding+border）
这两个属性，他们绑定在了所有的节点元素上。获取之后，只要调用这两个
属性，我们就能够获取元素节点的宽和高。
计算：
offset宽/高 = 盒子自身的宽/高 + padding +border；
offsetWidth = width+padding+border；
offsetHeight = Height+padding+border；

offsetLeft 和offsetTop （检测距离父盒子有定位的左/上面的距离）
返回距离上级盒子（带有定位）左边s的位置
如果父级都没有定位则以body为准。

offsetLeft 从父亲的padding 开始算,父亲的border 不算。
在父盒子有定位的情况下，offsetLeft == style.left(去掉px)

offsetParent （检测父系盒子中带有定位的父盒子节点）

1、返回改对象的父级（带有定位）
如果当前元素的父级元素没有进行CSS定位（position为absolute
或relative，fixed）， offsetParent为body。
2、如果当前元素的父级元素中有CSS定位（position为absolute
或relative，fixed）， offsetParent取最近的那个父级元素。
offsetLeft和style.left区别

一、最大区别在于offsetLeft可以返回没有定位盒子的距离左侧的位置。而 style.top 不可以
二、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
三、offsetTop 只读，而 style.top 可读写。（只读是获取值，可写是赋值）
四、如果没有给 HTML 元素指定过 top 样式，则style.top 返回的是空字符串。

0 0