前端复习--css实现幻灯片效果

最新推荐文章于 2025-05-25 16:33:48 发布

原创最新推荐文章于 2025-05-25 16:33:48 发布 · 4k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了如何利用CSS实现幻灯片效果，通过设置div尺寸限制只显示一张照片，并结合overflow:hidden属性，以及利用锚点进行切换，达到简单的前端幻灯片展示。

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

1 原文链接：http://caibaojian.com/css-slide.html
前端开发博客 (http://caibaojian.com/css-slide.html)

这是一种较为简单原始的方法，主要原理：有多张照片放在一个div中，div的属性尺寸设置为每一次只能显示一张照片，且overflow:hidden，然后在每张照片中设置锚点，即可。

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css实现幻灯片</title>
	<style type="text/css">
	.slide2-con{margin: 0 auto; width:400px;}
	.slide2-con .slide2-box{width:400px; height: 400px; overflow: hidden; margin: 20px auto;}
	.slide2-con .slide2-box div{width:400px; height: 400px;}
	.slide2-con .slide2-box div img{height: 400px;}
	.slide2-nav a{display:inline-block; *display:inline; *zoom:1; width:40px; height: 40px; margin-top: 20px;}
	.slide2-nav img{width:40px; height: 40px;}
	</style>
</head>
<body>
	<div class="slide2-con">
		<div class="slide2-box">
			<div id="a1">
				<img src="b1.jpg"/>
			</div>
			<div id="a2">
				<img src="b2.jpg"/>
			</div>
			<div id="a3">
				<img src="b3.jpg"/>
			</div>
			<div id="a4">
				
			</div>
		</div>
		<div class="slide2-nav clearfix">
			<a href="#a1"><img src="b1.jpg"/></a>
			<a href="#a2"><img src="b2.jpg"/></a>
			<a href="#a3"><img src="b3.jpg"/></a>
			<a href="#a4">关闭</a>
		</div>
		<div class="clear"></div>
	</div>
</body>
</html>

2 利用CSS3 的属性设置（自己写的，左右翻转幻灯片，默认的话是上下翻转的，我就是小小作死）

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css实现幻灯片</title>
	<style type="text/css">
	div{
		width:600px;
		height: 400px;
		margin:20px auto;
		overflow: hidden;
	}
	ul{
		width: 1500px;
	}
	li{
		list-style: none;
		display: inline-block;
		-webkit-animation:slide 6s infinite;
	}
	@-webkit-keyframes slide{
		0%{
			transform: translateX(0px);
		}
		25%{
			transform: translateX(-400px);
		}
		50%{
			transform: translateX(-800px);
		}
		75%{
			transform: translateX(0px);
		}
		100%{
			transform: translateX(-400px);
		}
	}
	</style>
</head>
<body>	
	<div>
		<ul id="slideShowBox">
			<li><img src="b1.jpg"/></li>
			<li><img src="b2.jpg"/></li>
			<li><img src="b3.jpg"/></li>
		</ul>
	</div>
</body>
</html>