web前端面试题：用css实现幻灯片效果

最新推荐文章于 2025-05-17 10:52:51 发布

原创最新推荐文章于 2025-05-17 10:52:51 发布 · 2.1k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#web前端面试 #label标签for #幻灯片 #css实现加分

css 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何仅使用CSS3实现幻灯片效果，通过单选按钮radio和label标签的for属性完成图片切换，无需JavaScript，适用于网页设计爱好者。

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

题目：请写一个简单的幻灯效果页面（如果不使用JS来完成，可以加分）

幻灯片效果其实就是实现图片的点击切换，一般情况下我们都会想到用js来做，但是用css方法要怎么实现呢

可以利用CSS3的单选按钮radio和label标签的for属性来实现图片的切换

label里面的for属性对应的是要显示的图片的id名字

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<style>
	*{
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.wrap{
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -130px;
		margin-left: -150px;
		text-align: center;
	}
	img{
		padding: 5px;
		border: 1px solid #ddd;
		display: none;
		width: 300px;
		height: 260px;
	}
	input{
		position: absolute;
		left: -99999px;
	}
	.banner{
		display: flex;
	}
	label{
		cursor: pointer;
		flex-grow: 1;
		border: 1px solid #ddd;
		margin-top: 5px;
	}
	input:checked + img{
		display: block;
	}
</style>
<body>

	<div class="wrap">
		<div class="box">
			<ul>
				<li>
					<input type="radio" name='img' id='img1' checked>
					<img src="1.jpg" alt="">
				</li>
				<li>
					<input type="radio" name='img' id='img2' >
					<img src="2.jpg" alt="">
				</li>
				<li>
					<input type="radio" name='img' id='img3' >
					<img src="3.jpg" alt="">
				</li>
			</ul>
		</div>
		<div class="banner">
			<label for="img1">第一张 </label>
			<label for="img2">第二张</label>
			<label for="img3">第三张</label>
		</div>
	</div>
</body>
</html>