切换图片

最新推荐文章于 2023-08-21 13:55:36 发布

J狂奔的蜗牛

最新推荐文章于 2023-08-21 13:55:36 发布

阅读量296

点赞数

文章标签： js

本文链接：https://blog.csdn.net/fnaofdgug/article/details/100606964

版权

**

关于onmouseover事件与拼接+i+显示图片分析

**
达到当鼠标移到小图片的时候，大图片将切换成小图片的效果，如下图所示：

在这里插入图片描述

对应的代码如下所示：

<!DOCTYPE html>
<html>

 <head>
  <meta charset="utf-8">
  <title>onmouseover事件与拼接显示分析</title>
  <style type="text/css">
   *{
      margin:0px;
      padding: 0px;
     }
      #smallImg li{
             list-style: none;
               float:left;
               margin-left: 5px;
                    }
  </style>
  <script type="text/javascript">
   window.onload = function(){
       var lists = document.getElementsByTagName("img"); 
       for (var i=0;i<lists.length;i++) {       
          lists[i].onmouseover = function(){        
            document.getElementById("bigImg1").src=this.src;
//        document.getElementById("bigImg1").src="images/top"+(i+1)+".jpg";
          debugger
    }
    }  
    }
  </script>
 </head>

 <body>
  <div id="bigImg">
   <img src="img/Images/top1.jpg" id="bigImg1">
  </div>
  <div id="smallImg">
   <ul>
    <li><img src="img/Images/top2.jpg" width ="52"></li>
    <li><img src="img/Images/top3.jpg" width="52"></li>
    <li><img src="img/Images/top4.jpg" width="52"></li>
    <li><img src="img/Images/top5.jpg" width="52"></li>
    <li><img src="img/Images/top6.jpg" width="52"></li>
   </ul>
  </div>
 </body>

</html>

 本来是没什么疑问的。直接用onmouseover事件+this就可以实现，而我的同学开始确是用的拼接i循环的方法显示 ，听他的讲解我觉得他的思路没什么问题，但是运行的时候实现不了而不给i值直接写数字（2，3，4，5，6）的时候又可以正常显示，我想了下可能差异还是在i上面，实际上相当于每个list[i]的document.getElementById("bigImg1").src都是对应的不同图片，既：

lists[0]： document.getElementById(“bigImg1”).src=“img/Images/top2.jpg”；
lists[1]： document.getElementById(“bigImg1”).src=“img/Images/top3.jpg”；
lists[2]： document.getElementById(“bigImg1”).src=“img/Images/top4.jpg”；
lists[3]： document.getElementById(“bigImg1”).src=“img/Images/top5.jpg”；
lists[4]： document.getElementById(“bigImg1”).src=“img/Images/top6.jpg”；
而this.src，却是每次给的都是同一个值，所以效果不同。当然这是我的理解，欢迎大家阐述不同的观点。

 今天又碰到了图片循环问题，忍不住又研究了一下，还是一样先看显示效果如下图

在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		*{
			margin: 0px;padding: 0px;
		}
		img{
			width: 300px;
			height: 300px;
		}
		li{
			list-style: none;
			border: 1px solid;
			float: left;
			width: 80px;
			margin-left: 20px;
			background-color: pink;
		}
		#pic2{
			clear: both;
		}
		</style>
		
		<script type="text/javascript">
		window.onload=function(){
			var lis=document.getElementsByTagName("li");
//			lis[0].onmouseover=function(){
//		        	var x=this.innerHTML;
//		        		document.getElementById("img1").src ="img/image/flower"+1+".png";
//		        	debugger
//		        	}
//			lis[1].onmouseover=function(){
//		        	var x=this.innerHTML;
//		        		document.getElementById("img1").src ="img/image/flower"+2+".png";
//		        	debugger
//		        	}
//			lis[2].onmouseover=function(){
//		        	var x=this.innerHTML;
//		        		document.getElementById("img1").src ="img/image/flower"+3+".png";
//		        	debugger
//		        	}
//			lis[3].onmouseover=function(){
//		        	var x=this.innerHTML;
//		        		document.getElementById("img1").src ="img/image/flower"+4+".png";
//		        	debugger
//		        	}
		        for(var i=0;i<lis.length;i++){
		        	lis[i].onmouseover=function(){
		        	var x=this.innerHTML;
		        		document.getElementById("img1").src ="img/image/flower"+x+".png";
		        	debugger
		        	}
		        }
		}
		        
				
		</script>
	</head>

	<body>
		<div id="pic">
			<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			</ul>
			<div id="pic2">
			</div>
			<img src="img/image/flower1.png" alt="图片切换" id="img1"/>
			<!--<img src="img/image/flower2.png" alt="图片切换" id="img2"/>
			<img src="img/image/flower3.png" alt="图片切换" id="img3"/>-->
		</div> 		
	</body>
</html>

 但是又有新的收获，之前的想法可能是错的 ，实际上

不能用i进行拼接是由于i值在该事件中显示的是未定义

，所以无法判别，而用 var x=this.innerHTML;却可以实现。控制台查看情况如下图：

在这里插入图片描述

J狂奔的蜗牛

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
切换图片

**鼠标移到小图片时变成相应的大图片**达到当鼠标移到小图片的时候，大图片将切换成小图片的效果，如下图所示：
复制链接

扫一扫