当鼠标在图片上滑动或移出时，实现图片切换

最新推荐文章于 2022-01-12 19:27:06 发布

远飞的梦

最新推荐文章于 2022-01-12 19:27:06 发布

阅读量1.1k

点赞数 1

分类专栏：前端文章标签： javascript html 图片切换

本文链接：https://blog.csdn.net/qq_32248959/article/details/51396479

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>切换图片</title>
<style type="text/css">
#div1{
width:500px;
height:100px;
border:solid #000000;
}
#div2{
width:500px;
height:100px;
border:solid #000000;
}
</style>
<script type="text/javascript">

var imagesObj; // tag=a;
var imageNum;
var i;
function imageNum(){
imagesObj=document.images;
imageNum=imagesObj.length;
i=1;
alert("文档中包含"+imageNum+"张图片！");

}
function varieScope(){
//可以取到a处声明的变量;
alert(imageNum+"张图片");
}
function duogeWay(){
alert("可以在一个地方加多个事件吗？--可以");
}
function changeImage(src){


//如何控制获得的图片集合里的每一个对象；下标？
// alert("输出变量"+i);
imagesObj[1].src=src;

}
window.οnlοad=imageNum;
</script>
</head>

<body>

<div id="div1" >
<img src="images/1.jpg" name="myImage1" width="375" height="57" οnclick="varieScope()()" οnmοuseοut="duogeWay()"/>
</div>
<div id="div2">
<img src="images/2.jpg" name="myImage2" width="365" height="57" οnmοuseοver="changeImage('images/1.jpg')" οnmοuseοut="changeImage('images/2.jpg')"/>
</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>切换图片</title>
<style type="text/css">
	#div1{
		width:500px;
		height:100px;
		border:solid #000000;
	}
	#div2{  
		width:500px;
		height:100px;
		border:solid #000000;
	}
</style>
<script type="text/javascript">
<!--不能在这里声明？ 可以声明但不能赋值?  都可以 -->
	var imagesObj;						// tag=a;
	var imageNum;
	var i;
	function imageNum(){
		imagesObj=document.images;
		imageNum=imagesObj.length;
		i=1;
		alert("文档中包含"+imageNum+"张图片！");
			
	}
	function varieScope(){
		//可以取到a处声明的变量;
		alert(imageNum+"张图片");
	}
	function duogeWay(){
		alert("可以在一个地方加多个事件吗？--可以");
	}
	function changeImage(src){
	<!--当鼠标在图片上滑动或移出时，实现图片切换。-->

		//如何控制获得的图片集合里的每一个对象；下标？
		// alert("输出变量"+i);
		imagesObj[1].src=src;

	
	}
	window.οnlοad=imageNum;
</script>
</head>

<body>
	<!-- οnclick="changeImage()" 括号后面不带“;”带了也能执行-->
	<div id="div1" >
		<img src="images/1.jpg" name="myImage1" width="375" height="57" οnclick="varieScope()()" οnmοuseοut="duogeWay()"/>
	</div>
	<div id="div2">
		<img src="images/2.jpg" name="myImage2" width="365" height="57" οnmοuseοver="changeImage('images/1.jpg')" οnmοuseοut="changeImage('images/2.jpg')"/>
	</div>
</body>
</html>

远飞的梦

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
当鼠标在图片上滑动或移出时，实现图片切换

function changeImage(src){  //如何控制获得的图片集合里的每一个对象；下标？ // alert("输出变量"+i); imagesObj[1].src=src; }
复制链接

扫一扫

专栏目录