offsetLeft之原生js制作轮播

最新推荐文章于 2021-11-01 22:21:21 发布
最新推荐文章于 2021-11-01 22:21:21 发布
阅读量211 收藏
点赞数
分类专栏： 轮播原生
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zuo_zuo_blog/article/details/103901792
版权
  1. offset：偏移，检测
  2. 作用：获取元素尺寸，获取盒子宽高
    offsetWidth，offsetHeight
    包括宽高本身，padding，border,不包括margin
    offsetHeight=height+border+padding
    offsetHeight = Height+padding+border
  3. offsetTop和offsetLeft 检测距离父盒子有定位的左上的距离（offsetLeft从父亲的padding开始算，父亲的border不算，在父盒子有定位的情况下，offsetLeft=style.left）
  4. offsetParent复习盒子中带有定位的盒子，如果没有定位返回body，如果有返回最近那个
  5. offsetLeft和style.left的最大区别：（a）offsetLeft可以返回没有定位的盒子的距离左侧的位置，如果没有定位，以body为主。而style.left只能获取行内式，如果没有返回“”。（b）offsetLeft返回number，而style.left返回string（c）offsetLeft只能获取值，而style.left可以赋值
  6. 动画封装
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box1{
				margin: 0;
				padding: 5px;
				height: 200px;
				background-color: #ddd;
				position: relative;
			}
			button{
				margin: 5px;
			}
			.box2{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
				left: 0;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<button>运动到200</button>
			<button>运动到400</button>
			<div class="box2" ></div>
		</div>
		<script>
			var timer=null;
			var btnArr=document.getElementsByTagName("button");
			var box2=document.getElementsByClassName("box2")[0];
			btnArr[0].onclick=function(){
				animate(box2,200);
			}
			btnArr[1].onclick=function(){
				animate(box2,400);
			}
			
			//animate封装
			function animate(ele,target){
				clearInterval(ele.timer);
				var speed=target>ele.offsetLeft?10:-10;
				ele.timer=setInterval(function(){
					var val=target-ele.offsetLeft
					ele.style.left=ele.offsetLeft+speed+"px";
					if(Math.abs(val)<Math.abs(speed)){
						ele.style.left=target+"px";
						clearInterval(ele.timer);
					}
				},30);
			}
			
		</script>
	</body>
</html>

轮播图
7. 滑动焦点图
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			.box{
				width: 490px;
				height: 170px;
				padding: 5px;
				border:1px solid #ccc;
				margin: 100px auto;
			}
			.inner{
				width: 490px;
				height: 170px;
				position: relative;
				overflow: hidden;
			}
			ul{
				width: 500%;
				position: absolute;
				left: 0;
				list-style: none;
			}
			li{
				float: left;
			}
			.square{
				position: absolute;
				bottom:10px ;
				right: 10px;
			}
			span{
				display: inline-block;
				width: 16px;
				height: 16px;
				background-color: #fff;
				margin: 3px;
				border-radius: 20px;
				border: 1px solid #ccc;
				text-align: center;
				line-height: 16px;
				cursor: pointer;
			}
			.current{
				background-color: darkorange;
				color: #fff;
			}
		</style>
		<script>
			window.onload=function(){
				var inner=document.getElementById("inner");
				var ul=inner.children[0];
				var imgWidth=inner.offsetWidth;
				var spanArr=inner.children[1].children;
				
				//绑定事件
				for(var i=0;i<spanArr.length;i++){
					spanArr[i].index=i;
					spanArr[i].onmouseover=function(){
						//点亮盒子排他思想
						for(var j=0;j<spanArr.length;j++){
							spanArr[j].className=""
						}
						this.className="current";
						//移动ul
						animate(ul,-this.index*imgWidth);
					}
					
				}
				
				function animate(ele,target){
					clearInterval(ele.timer);
					var speed=target>ele.offsetLeft?10:-10;
					ele.timer=setInterval(function(){
						var val=target-ele.offsetLeft
						ele.style.left=ele.offsetLeft+speed+"px";
						if(Math.abs(val)<Math.abs(speed)){
							ele.style.left=target+"px";
							clearInterval(ele.timer);
						}
					},10);
				}
			}
		</script>
	</head>
	<body>
		<div class="box">
			<div class="inner" id="inner">
				<ul>
					<li><image src="images/01.jpg" alt="" /></li>
					<li><image src="images/01.jpg" alt="" /></li>
					<li><image src="images/01.jpg" alt="" /></li>
					<li><image src="images/01.jpg" alt="" /></li>
					<li><image src="images/01.jpg" alt="" /></li>
				</ul>
				<div class="square" >
					<span class="current">1</span>
					<span>2</span>
					<span>3</span>
					<span>4</span>
					<span>5</span>
				</div>
			</div>
		</div>
	</body>
</html>
  1. 左右轮播图
    在这里插入图片描述
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			#box{
				width: 490px;
				height: 200px;
				padding: 5px;
				border:1px solid #ccc;
				margin: 100px auto;
				position: relative;
				overflow: hidden;
			}
			.ad{
				width: 490px;
				height: 200px;
				position: relative;
				overflow: hidden;
			}
			#box img{
				width:490px;
			}
			ul{
				width:2940px;
				position: absolute;
				left: 0;
				top: 0;
				list-style: none;
			}
			li{
				float: left;
			}
			#arr{
				display: none;
			}
			#box:hover #arr{
				display: block;
			}
			#arr span{
				width: 40px;
				height: 40px;
				position: absolute;
				left: 5px;
				top: 50%;
				margin-top: -20px;
				background: #000;
				cursor: pointer;
				line-height: 40px;
				text-align: center;
				font-weight:bold; 
				font-family:'黑体'; 
				font-size: 30px;
				color: #fff;
				opacity: 0.3;
				border: 1px solid #fff;
			}
			#arr #right{
				right: 5px;
				left: auto;
			}
		</style>
	</head>
	<body>
		<div class="all" id="box">
			<div class="ad">
				<ul id="imgs">
					<li><img src="images/1.jpg" /></li>
					<li><img src="images/2.jpg" /></li>
					<li><img src="images/3.jpg" /></li>
					<li><img src="images/4.jpg" /></li>
					<li><img src="images/5.jpg" /></li>
				</ul>
			</div>
			<div id="arr">
				<span id="left"><</span>
				<span id="right">></span>
			</div>
		</div>
		<script>
			var box=document.getElementById("box");
			var imgWidth=box.children[0].offsetWidth;
			var btnArr=box.children[1].children;
			var ul=box.children[0].children[0];
			
			//定义计数器
			var index=0;
			//点击右侧图片像左移动
			btnArr[1].onclick=function(){
				index++;
				if(index>ul.children.length-1){
					index=ul.children.length-1;
				}
				animate(ul,-index*imgWidth);
			}
			btnArr[0].onclick=function(){
				index--;
				if(index<0){
					index=0;
				}
				animate(ul,-index*imgWidth);
			}
			
			function animate(ele,target){
				clearInterval(ele.timer);
				var speed=target>ele.offsetLeft?10:-10;
				ele.timer=setInterval(function(){
					var val=target-ele.offsetLeft
					ele.style.left=ele.offsetLeft+speed+"px";
					if(Math.abs(val)<Math.abs(speed)){
						ele.style.left=target+"px";
						clearInterval(ele.timer);
					}
				},10);
			}
		</script>
	</body>
</html>
  1. 定时左右轮播
    在这里插入图片描述
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
				list-style: none;
				border: 0;
			}
			.all{
				width: 500px;
				height: 200px;
				padding: 7px;
				border: 1px solid #CCCCCC;
				margin: 100px auto;
				position: relative;
			}
			.screen{
				width: 500px;
				height: 200px;
				position: relative;
				overflow: hidden;
			}
			.screen li{
				width: 500px;
				height: 200px;
				overflow: hidden;
				float: left;
			}
			.screen ul{
				position: absolute;
				left: 0;
				top: 0;
				width: 3000px;
			}
			.all ol{
				position: absolute;
				right: 10px;
				bottom: 10px;
				line-height: 20px;
				text-align: center;
			}
			.all ol li{
				float: left;
				width: 20px;
				height: 20px;
				background: #fff;
				border:1px solid #ccc;
				margin-left:10px;
				cursor: pointer;
			}
			.all ol li.current{
				background: yellow;
			}
			#arr{
				display: none;
			}
			#all:hover #arr{
				display: block;
			}
			#arr span{
				width: 40px;
				height: 40px;
				position: absolute;
				left: 5px;
				top: 50%;
				margin-top: -20px;
				background: #000;
				cursor: pointer;
				line-height: 40px;
				text-align: center;
				font-weight:bold; 
				font-family:'黑体'; 
				font-size: 30px;
				color: #fff;
				opacity: 0.3;
				border: 1px solid #fff;
			}
			#arr #right{
				right: 5px;
				left: auto;
			}
		</style>
	</head>
	<body>
		<div class="all" id="all">
			<div class="screen" id="screen">
				<ul id="ul">
					<li><img src="images/1.jpg" width="500" height="200" /></li>
					<li><img src="images/2.jpg" width="500" height="200" /></li>
					<li><img src="images/3.jpg" width="500" height="200" /></li>
					<li><img src="images/4.jpg" width="500" height="200" /></li>
					<li><img src="images/5.jpg" width="500" height="200" /></li>
				</ul>
				<ol></ol>
				<div id="arr">
					<span id="left"><</span>
					<span id="right">></span>
				</div>
			</div>
		</div>
		<script>
			var all=document.getElementById("all");
			var screen=all.firstElementChild||all.firstChild;
			var imgWidth=screen.offsetWidth;
			var ul=screen.firstElementChild||screen.firstChild;
			var ol=screen.children[1];
			var div=screen.lastElementChild||screen.firstChild;
			var spanArr=div.children;
			
			//复制第一张图片所在的li，添加到ul的后面
			var ulnewLi=ul.children[0].cloneNode(true);
			ul.appendChild(ulnewLi);
			for(var i=0;i<ul.children.length-1;i++){
				var olnewLi=document.createElement("li");
				olnewLi.innerHTML=i+1;
				ol.appendChild(olnewLi);
			}
			var olLiArr=ol.children;
			olLiArr[0].className="current";
			
			for(var i=0;i<olLiArr.length;i++){
				olLiArr[i].index=i;
				olLiArr[i].onmouseover=function(){
					for(var j=0;j<olLiArr.length;j++){
						olLiArr[j].className="";
					}
					this.className="current";
					animate(ul,-this.index*imgWidth)
				}
			}
			
			//添加定时器
			var timer=setInterval(autoPlay,2000);
			var key=0;
			var square=0;
			function autoPlay(){
				key++;
				if(key>olLiArr.length){
					ul.style.left=0;
					key=1;
				}
				animate(ul,-key*imgWidth)
				square++;
				if(square>olLiArr.length-1){
					square=0;
				}
				for(var j=0;j<olLiArr.length;j++){
					olLiArr[j].className="";
				}
				olLiArr[square].className="current"
			}
			
			//划过清楚定时器
			all.onmouseover=function(){
				clearInterval(timer);
			}
			all.onmouseout=function(){
				timer=setInterval(autoPlay,2000);
			}
			
			//左右按钮切换图片
			spanArr[0].onclick=function(){
				key--;
				if(key<0){
					ul.style.left=-imgWidth*(olLiArr.length)+"px";;
					key=olLiArr.length-1;
				}
				animate(ul,-key*imgWidth)
				square--;
				if(square<0){
					square=olLiArr.length-1;
				}
				for(var j=0;j<olLiArr.length;j++){
					olLiArr[j].className="";
				}
				olLiArr[square].className="current"
			}
			spanArr[1].onclick=function(){
				autoPlay();
			}
			
			function animate(ele,target){
				clearInterval(ele.timer);
				var speed=target>ele.offsetLeft?10:-10;
				ele.timer=setInterval(function(){
					var val=target-ele.offsetLeft
					ele.style.left=ele.offsetLeft+speed+"px";
					if(Math.abs(val)<Math.abs(speed)){
						ele.style.left=target+"px";
						clearInterval(ele.timer);
					}
				},10);
			}
		</script>
	</body>
</html>
zuo_zuo_blog
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于使用offsetWidth实现轮播
qq_40635345的博客
11-26 306
window.addEventListener('load',function() { //获取元素 var arrow_l = document.querySelector('.arrow-l'); var arrow_r = document.querySelector('.arrow-r'); var focus = document.querySelect...
JavaScript攻克轮播图之style.left与offsetLeft的区别
weixin_44387879的博客
01-06 397
今天写完作业实在无聊,看着页面上面毫无灵魂的轮播图(不会动)感觉十分差劲,于是翻开了之前写的京东案例,想根据最近学的js基础尝试着完善之前写过的轮播图代码,看懂了个大概,关于函数和逻辑方面略懂了一些,但是到最后还是没有完全理解下来,虽然图片有了灵魂(可以动);但是并不是有趣的灵魂(有很多bug);试问这样的灵魂有何用.郁闷了半天,顺便调戏了半天度娘,结果度娘就是度娘,就跟你娘一样,东西是很多,但都...
JavaScript动画：offset和匀速动画详解(含轮播图的实现)
weixin_34365635的博客
02-02 231
本文最初发表于博客园，并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我，一起入门和进阶前端。 以下是正文。 offset简介 我们知道，三大家族包括：offset/scroll/client。今天来讲一下offset，以及与其相关的匀速动画。 offset的中文是：偏移，补偿，位移。 js中有一套方便的获取元素尺寸的办法就是offset家族。offset家族包括： ...
Javascript第八天学习总结offset家族及简单轮播图
YanTuTwo的博客
08-19 600
offset家族： * offsetWidth/offsetHeight:检测盒子的宽高：width+padding+border; * offsetLeft/offsetTop:检测盒子距离有定位的父元素的距离 * offsetParent:盒子的有定位的父元素先封装一个移动的函数： function animate(obj,target) {
一文看懂js中元素偏移量（offsetLeft,offsetTop,offsetWidth,offsetHeight）
sinat_41212418的博客
11-01 6355
偏移量（offset dimension） 偏移量：包括元素在屏幕上占用的所有可见空间,元素的可见大小由其高度，宽度决定，包括所有内边距，滚动条和边框大小（注意，不包括外边距）。 以下4个属性可以获取元素的偏移量 offsetHeight：元素在垂直方向上占用的空间大小，以像素计。包括元素的高度（可见的），水平滚动条的高度，上边框高度和下边框高度。 offsetWidth：元素在水平方向上占用的空间大小，以像素计。包括元素的宽度（可见的），垂直滚动条的宽度，左边框宽度和右边框宽度。 3: off
JS：offsetWidth\offsetleft 等属性&图片连续滚动的实现
cuishi0010的博客
12-21 698
网页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth (包括边线的宽); 网页可见区域高： document.body.offsetHeight (包括边线的宽); 网页正文全文宽： document.body.scrollWid
关于JS原生的offset的一些简单理解
u014608930的博客
06-21 1万+
offset这个属性，可以说是非常有用的，顾名思义，offset翻译过来就是偏移量，从名字就可以看出它的具体意义了。也即是元素相当于父元素的偏移量。offset大致包括offsetTop、offsetLeft、offsetWidth、offsetHeight、offsetParent五个部分，直白的翻译过来分别是上偏移、左偏移、偏移宽度、偏移高度、偏移父级。翻译虽不够恰当，但仍可体现出其大致意义。...
js原生实现jquery方法offset()和position()
vcxiaohan的博客
08-19 5032
$(() => { console.log($('p').offset()) console.log($('p').position()) console.log(offset($('p')[0])) console.log(position($('p')[0])) // jquery offset原生实现 function offset(target)
原生js中获取offset系列值 和 jquery中获取 offset（）的区别
JiM-W 的博客
01-16 5126
jQuery offset（） js
DOM Element对象的offsetXXX方法
目尽地平线
09-08 6438
原生js的offset***方法以及jquery的offset()方法，获取元素到浏览器边界的位置，做网格坐标的时候刚好用到这个
原生js实现offset方法
永恒的避风港
03-26 575
在为 jTool 提供 offset (获取当前节点位置）方法时， 先后使用了两种方式进行实现， 现整理出来以作记录。 通过递归实现 function offset(element) { var offest = { top: 0, left: 0 }; var _position; getOffset(element, true); return offest; ...
JavaScript：简单轮播图实现方式(容器居中浏览器)
Yoke
07-28 679
1.效果展示 2.实现需求 点击按钮弹出轮播模块 鼠标放在轮播图上停止轮播，移开开始轮播（焦点事件） 图片下标随轮播变化 3.代码模块 具体如何实现看代码注释 window.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>window&l...
【JavaScript】全面解析offsetLeft、offsetTop
热门推荐
汪小穆的博客
05-26 5万+
前言：偏移量，很多动画效果的实现都是通过去改变偏移量的改变来实现的，但是你真的完全了解offsetLeft，offsetTop吗？ 一、第一个小例子 <body> <style> body { margin:0; } .box1 { width:300px; height:300px; margin:100px; background:#333...
原生HTML5关于Div对象的.clientLeft、.offsetLeft、.clientX、.offsetX区分
chongfeng2994的博客
11-28 603
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zeping891103/article/details/72627855 本篇主要介绍clientLeft、offsetLeft、clientX、offsetX这四种元素属性的...
Javascript基础——利用定时器实现的图片无缝滚动(offsetLeft)
zxy9602的博客
11-06 2944
1、无缝滚动 原理：（1）让div动起来，让ul一直向左/向右移动；       （2）即利用定时器让物体从左到右或从右到左进行滚动。 步骤：（1）复制li——innerHTML和+=，将
原生js点击按钮改变盒子的left值使盒子移动
u010234868的专栏
08-16 3582
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box { width: 100px; height: 100px; background-color: pink; position: relative; /*右移位置改变脱离文档流*/ } .
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值