HTML+CSS+JS&点击事件切换图片

最新推荐文章于 2024-07-16 19:35:54 发布

Joyce_lulu

最新推荐文章于 2024-07-16 19:35:54 发布

阅读量2.1k

点赞数

文章标签： html js

本文链接：https://blog.csdn.net/Joyce_lulu/article/details/99222796

版权

这篇博客介绍了如何结合HTML、CSS和JavaScript实现一个简单的图片切换功能，通过点击事件来触发不同图片的显示，为网页增加交互性。

摘要由CSDN通过智能技术生成

在这里插入图片描述

<body>
	<img src="banner_1.jpg" id="banner_1" style="position:absolute;z-index:1;">
	<img src="right.png" id="right" style="position:absolute;z-index:2;top:150px;left:1400px;" >
	<img src="left.png" id="left" style="position:absolute;z-index:2;top:150px;left:20px;" >
	<script type="text/javascript">
		var flag=0;
		var flag2=0;
		var img=document.getElementById("right");
		var img1=document.getElementById("banner_1")
		var img2=document.getElementById("left");
		img.onclick=function fun(){
			if(flag == 0){
				img1.src="banner_2.jpg";
				flag=1;
				flag2=2;
			}
			else if(flag==1){
				img1.src="banner_3.jpg";
				fl