实现图片的无缝滚动

最新推荐文章于 2022-05-17 19:47:08 发布

Torrex

最新推荐文章于 2022-05-17 19:47:08 发布

阅读量570

点赞数

本文链接：https://blog.csdn.net/Torrex/article/details/54585996

版权

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.οnlοad=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.οnclick=function(){//鼠标点击事件
					speed = -20;
				}
				oBtn_Down.οnclick=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 返回的是空字符串。

Torrex

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
实现图片的无缝滚动

HTML部分：制作图片的无缝滚动需要定位： .div1 { position: relative; width: 185px; height: 464px; margin: 100px 500px; border: 1px solid #000; overflow: hidde
复制链接

扫一扫