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

本文介绍如何仅使用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>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值