css3 点击切换轮播图

最新推荐文章于 2023-02-16 17:38:05 发布

狗的一天

最新推荐文章于 2023-02-16 17:38:05 发布

阅读量3.8k

点赞数 2

文章标签： css3 html

本文链接：https://blog.youkuaiyun.com/weixin_42638125/article/details/109511262

版权

本文介绍了一种使用CSS3实现的简单轮播图效果。通过设置不同状态下的输入元素和标签选择器，可以轻松实现图片的点击切换。该轮播图包含三个页面，每个页面背景颜色各异，并且可以通过点击对应的数字标签进行页面间的切换。

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

1.css3 点击切换轮播图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 设置切换的按钮 */
			label{
				width: 20px;
				height: 20px;
				background-color: #FF0000;
				margin-left: 10px;
				float: left;
				position: absolute;
				
			}
			/* 设置父类的宽高 */
			.father{
				width: 200px;
				height: 100px;
				background-color: #00FFFF;
				position: relative;
				overflow: hidden;
			}
			/* 设置切换li的宽高 */
			li{
				list-style: none;
				width: 200px;
				height: 100px;
				float: left;
				text-align: center;
				line-height:100px;
				
			}
			/* 设置li标签的样式 */
			.i1{
				
				background-color: #00FF7F;
			}
			.i2{
			
				background-color: #ffff7f;
			}
			.i3{
				
				background-color: #ff55ff;
			}
			/* 移动的ul的宽度 */
			ul{
				width: 600px;
				height: 100%;
				margin: 0;
				padding: 0;
				transition: all 0.5s;
			}
			/* 点击切换的 */
			.label2{
				left: 25px;
			}
			.label3{
				left: 50px;
			}
			/* 点击移动边距 */
			#input1:checked~ul{
				margin-left: 0px;
			}
			#input2:checked~ul{
				margin-left: -200px;
			}
			#input3:checked~ul{
				margin-left: -400px;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<input type="radio" name="si" id="input1" value="" hidden="" />
			<label class="label1" for="input1">1</label>
			<input type="radio" name="si" id="input2" value="" hidden="" />
			<label class="label2" for="input2">2</label>
			<input type="radio" name="si" id="input3" value="" hidden="" />
			<label class="label3" for="input3">3</label>
			<ul>
				<li class="i1">第一页</li>
				<li class="i2">第二页</li>
				<li class="i3">第三页</li>
			</ul>
		</div>
	</body>
</html>