CSS 轮播图

最新推荐文章于 2023-04-06 20:31:33 发布

qq_37175053

最新推荐文章于 2023-04-06 20:31:33 发布

阅读量480

点赞数 1

分类专栏： CSS 前端轮播图文章标签：前端 CSS 动画效果

本文链接：https://blog.csdn.net/qq_37175053/article/details/95390808

版权

CSS 同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

前端

6 篇文章 0 订阅

订阅专栏

轮播图

1 篇文章 0 订阅

订阅专栏

CSS轮播图

效果如下图，点击小图标即可切换图片。
在这里插入图片描述
废话不对多，直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>纯CSS切换图片</title>
	<style>
		body{
			background-color: #666;
		}
		div.screen {
			width: 534px;
			height: 300px;
			margin: 150px auto;
			text-align: center;
			position: relative;
		}
		img {
			/* margin:0 auto;可以使盒子居中，text-align:center;可以使此盒子内的内联元素居中 */
			width: 534px;
			height: 300px;
			position: absolute;
			top: 0;
			left: 0;
		}
		.nav {
			width: 534px;
			position: absolute;
			top: 250px;
/* 			text-align: center; */
			z-index: 2;
		}
		a {

			display: inline-block;
			text-decoration: none;
			width: 30px;
			height: 30px;
			margin: 0 20px;
			border-radius: 50%;
			border: 1px solid #fff;
		}
		.one {
			background-image: url('images/pic2.jpg');
			background-size: 54px 30px;
			background-repeat: no-repeat;
			background-position: center center;
		}
		.two {
			background: url('images/pic3.jpg') no-repeat;
			background-size: 54px 30px;
			background-repeat: no-repeat;
			background-position: center center;
		}
		.three {
			background: url('images/pic4.jpg') no-repeat;
			background-size: 54px 30px;
			background-repeat: no-repeat;
			background-position: center center;
		}
		.four {
			background: url('images/pic5.jpg') no-repeat;
			background-size: 54px 30px;
			background-repeat: no-repeat;
			background-position: center center;
		}
		.one2:target {
			z-index: 1;
			animation: moveRight 0.5s;
		}
		.two2:target {
			animation: moveRight 0.5s;
			z-index: 1;
		}
		.three2:target {
			animation: moveRight 0.5s;
			z-index: 1;
		}
		.four2:target {
			animation: moveRight 0.5s;
			z-index: 1;
	
		}
		@keyframes moveRight {
			from {
				transform: translateX(200px);
			}to {
				transform: translateX(0);
			}

		}

	</style>
</head>
<body>
	<div class="screen">
		<img class="one2" id="one1" src="images/pic2.jpg" alt="">
		<img class="two2" id="two1" src="images/pic3.jpg" alt="">
		<img class="three2" id="three1" src="images/pic4.jpg" alt="">
		<img class="four2" id="four1" src="images/pic5.jpg" alt="">
		<div class="nav">
			<a class="one" href="#one1"></a>
			<a class="two" href="#two1"></a>
			<a class="three" href="#three1"></a>
			<a class="four" href="#four1"></a>
		</div>
	</div>
	
</body>
</html>

在这里插入图片描述

将上面的代码赋值到.html文件中，然后在.html的同级目录下新建images文件夹，并将上面的四副图片分别命名为pic1.jpg、pic2.jpg、pic3.jpg、pic4.jpg保存到该文件夹下，然后用浏览器打开.html文件即可。
轮播图也可用js技术实现，在后面的文章中会展示用js实现的轮播图。