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

Joyce_lulu

于 2019-08-11 19:42:55 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

文章标签： html js

本文链接：https://blog.youkuaiyun.com/Joyce_lulu/article/details/99222796

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

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

在这里插入图片描述

<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";
				flag=2;
				flag2=1;
			}
			else if(flag==2){
				img1.src="banner_1.jpg";
				flag=0;
				flag2=0;
			}
		}
		img2.onclick=function fun2(){
			if(flag2 == 0){
				img1.src="banner_3.jpg";
				flag2=1;
				flag=2;

			}