HTML+CSS+JavaScript实现切换焦点图

要实现的效果：当鼠标移动到左侧的图片的时候，右侧要显示出这个图片，同时箭头的图片也要移动下图是默认情况下当箭头移动到左侧第二张照片的效果图当鼠标移动到左侧第三张的时候的效果图下面是HTML代码<!DOCTYPE html><html><head><meta charset="utf-8"><title>自动切换焦点图</title&

我爱布朗熊

2620人浏览 · 2022-03-21 22:21:59

我爱布朗熊 · 2022-03-21 22:21:59 发布

要实现的效果：当鼠标移动到左侧的图片的时候，右侧要显示出这个图片，同时箭头的图片也要移动

下图是默认情况下

当箭头移动到左侧第二张照片的效果图

当鼠标移动到左侧第三张的时候的效果图

下面是HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自动切换焦点图</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
	<body>
<!-- 父级要清理浮动 -->
		<div id=""  class="box clearfix">
			<div id="left">
				<ul class="">
					<!-- 下面是左侧图片 -->
					<li><img src="2020.4.4%20(4).jpg"></li>
					<li><img src="2020.4.4%20(5).jpg"></li>
					<li><img src="2020.4.4%20(6).jpg"></li>
				</ul>
			</div>
          <img src="箭头.webp" id="pointer" class="pointer" >
			<div id="right">
				<ul class="">
					<!-- 下面是右侧图片 -->
					<li ><img src="2020.4.4%20(4).jpg" class="show"></li>
					<li ><img src="2020.4.4%20(5).jpg" class=""></li>
					<li ><img src="2020.4.4%20(6).jpg"></li>
				</ul>
			</div>
		</div>

      <script src="js.js" type="text/javascript" charset="utf-8">
	  
	  </script>
	</body>
</html>

下面是CSS代码

#left img {
	width: 140px;
	height: 140px; 
}
#left{
	float: left;
}
#left li,#right li{
	list-style-type: none;
	/* 让图片紧靠一点 */
	margin-top:-4px;
}

#right img{
	width: 300px;
	height: 300px;
	float: left;
 	margin-top:50px ;
	margin-left: 3px; 
	/* 下面让图片都隐藏 */
	 display: none; 
}
/* 权重和上面的（#right img）一样的时候，下面的代码优先生效 */
#right .show{
	 display: inline-block; 
}
#right{
	float: left;
}
/* 清理浮动 */
.clearfix::after{
	clear: both;
}
.clearfix::before{
	content: "";
	display: table;
}

/* 下面对箭头进行操作 */
.pointer{
	/* 要和左边的几张图片一样大 */
	width: 140px;
	height: 140px;
	
	/* 绝对定位 */
	position: absolute;
	top:0px;
	left:0;
	margin-left: 40px;
	margin-top: 12px;
}
.box{
	/* 这是一个相对定位，它的子变迁的相对定位会根据它的父标签的绝对定位进行定位 */
	position: relative;
}

下面是JS代码

/* 获取左右侧图片信息 */
var leftIMG = document.getElementById("left").getElementsByTagName("img");
var rightIMG = document.getElementById("right").getElementsByTagName("img");
/* 获取箭头图片信息 */
var pointer = document.getElementById("pointer");
/* 先为左侧的图片绑定上鼠标移上去的事件 */
for (var i = 0; i < leftIMG.length; i++) {
	/* console.log(leftIMG[i]); */
	leftIMG[i].onmouseover = mouseOver;
	/* 下面这一步的目的就是让每个图片都有一个编号 */
	leftIMG[i].index = i;
}

/* 位置是距离顶部来说的 */
var nowPosition=0; /* 默认箭头的位置是距离顶部0,这个代指现在的位置 */
var newPosition=0; /* 定义一个新的位置 */
var speed = 4; /* 当图片移动的时候，每次会移动4，经过不断的移动4，就营造出来一个动画的效果*/
var run = null; /* 20毫秒触发一次这个函数 */

var TopArr=[0,140,280];
/* 当鼠标移动到左侧的图片的时候，就会触发下面这个事件 */
function mouseOver() {
	/* this在这个地方就是代表的当前图片 */
	/* console.log(this.index);这行代码用来测试 */
	/* console.log(this.index); */
	for (var i = 0; i < rightIMG.length; i++) {
		/* 这个for循环会切换右侧的图片 ,this代表左侧图片*/
		if (this.index == i) {
			/* 当鼠标移动到的图片的编号与现在这个相同时*/
			/* 即左右边编号相同，此时右边的图片进行切换*/
			rightIMG[i].className = "show";
			/* 图片切换的同时，箭头图片也进行切换*/
			newPosition =TopArr[i]; /* 目标值 */
			console.log('27newPosition'+newPosition)
			nowPosition = pointer.offsetTop;
			console.log("29nowPosition"+nowPosition)
			/* offsetTop 相对于父级，高度的位置*/
			
 			if (run == null)
			/* 注意！这个地方不能加双引号 */
				run = setInterval(pointerMove, 5);  /* 20毫秒触发一次这个函数 */
			/* 为了防止再开一个 */
			/* console.log('s'+pointer.style.top) */
		} else {
			rightIMG[i].className = "";
		}
	}
}

function pointerMove() {
	/* 这里是从上往下移动*/
	if (nowPosition < newPosition) {
		nowPosition += speed;
		if (nowPosition>= newPosition) {
			/* 如果下一次执行，移动的距离超过newPosition*/
			nowPosition = newPosition;
			clearInterval(run); /* 并且让run停止 */
			run = null;
		}
	}
	/* 这里是从下往上移动*/
	if (nowPosition > newPosition) {
		nowPosition -= speed;
		if (nowPosition <= newPosition) {
			nowPosition = newPosition;
			clearInterval(run);
			run = null;
		}
	}
	if (nowPosition == newPosition) {
		/* 位置一个样*/
		clearInterval(run);
		run = null;
	}
	pointer.style.top = nowPosition + "px";
}