纯CSS实现水平轮播效果

以下为只使用CSS实现水平轮播效果代码。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			#list {
				width: 5464px;
				height: 768px;
				
			}
			
			#box {
				position: relative;
				width: 1366px;
				height: 768px;
				border: 1px solid #000000;
			}
			
			#list img {
				float: left;
				
			}
			
			#btn {
				position: absolute;
				right: 10px;
				bottom: 15px;
			}
			
			#btn a {
				float: left;
				width: 30px;
				height: 30px;
				border: 1px solid #000000;
				margin-right: 5px;
				text-align: center;
				line-height: 30px;
				text-decoration: none;
				background: rgba(0, 0, 0, .5);
				color: white;
			}
			
			#btn a:hover {
				background: #000000;
			}
			
			#box2 {
				width: 1366px;
				height: 768px;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="btn">
				<a href="#img1">1</a>
				<a href="#img2">2</a>
				<a href="#img3">3</a>
				<a href="#img4">4</a>
			</div>
			<div id="box2">
				<div id="list">
					<img id="img1" src="./imgs/img (1).jpg" />
					<img id="img2" src="./imgs/img (2).jpg" />
					<img id="img3" src="./imgs/img (3).jpg" />
					<img id="img4" src="./imgs/img (4).jpg" />
				</div>
			</div>
		</div>
		
	</body>
</html>

纯CSS实现水平轮播效果_第1张图片
纯CSS实现水平轮播效果_第2张图片
纯CSS实现水平轮播效果_第3张图片
纯CSS实现水平轮播效果_第4张图片
图片若有侵权,请联系进行删除。

你可能感兴趣的:(纯CSS实现水平轮播效果)