js焦点切换图，鼠标移动切换图片

最新推荐文章于 2022-07-30 21:21:10 发布

Lyonahah

最新推荐文章于 2022-07-30 21:21:10 发布

阅读量1.3k

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/Lyonahah/article/details/121350717

版权

本文介绍如何使用JavaScript在鼠标移动时实现焦点图的自动切换效果，详细讲解了相关代码实现和应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#muse{
				
				width: 800px;
				margin: 0 auto;
				position: relative;
				}
				#pic{
					border: solid 1px grey;
					width: 600px;
					text-align: center;
					margin: 0 auto;
				}
				#anniu{
					position: absolute;
					left: 150px;
					bottom: 20px;
				}
				#pic ul{
					list-style-type: none;
					padding: 0;
				}
				#pic li{
					display: none;
				}
				#anniu ul{
					list-style-type: none;
				}
				#anniu li{
					float: left;
					margin: 10px;
				}
				#anniu img{
					width: 80px;
					height: 40px;
					border: #808080 3px solid;
				}
				#anniu img:hover{
					border: aliceblue 3px solid;
				}
		</style>
	</head>
	<body>
		<div id="muse">
		<div id="pic">
			<ul>
			<li style="display: block;"><img src="img/001.jpg" ></li>
			<li><img src="img/002.jpg" ></li>
			<li><img src="img/003.jpg" ></li>
			<li><img src="img/004.jpg" ></li>
			</ul>
		</div>
		<div id="anniu">
			<ul>
				<li><img src="img/001.jpg" ></li>
				<li><img src="img/002.jpg" ></li>
				<li><img src="img/003.jpg" ></li>
				<li><img src="img/004.jpg" ></li>
			</ul>
		</div>
		</div>
		<script type="text/javascript">
			var pic=document.getElementById('pic');
			var img=pic.getElementsByTagName('li');
			var nn=document.getElementById('anniu');
			var tp=nn.getElementsByTagName('li');
			for(var i=0;i<tp.length;i++){
				tp[i].setAttribute('index',i);
				tp[i].onmouseover=function(){
					var myindex=this.getAttribute('index')
					for(var j=0;j<img.length;j++){
						img[j].style.display='none';
					}
					img[myindex].style.display='block';
				}
			}
			/*console.log(img)*/
		</script>
	</body>
</html>