太太太太太太适合新手啦！

因为太详细了····老代码人应该会觉得啰嗦吧····

思路：

  1. 先设置一个让图片显示在屏幕里的固定盒子
  2. 其次插入图片 使其横向排列
  3. 将超出固定盒子的图片隐藏住
  4. 在设置动画
  5. 利用span标签制作小圆点
  6. 多设置一个span标签做移动在小圆点之间的小圆点
  7. 给移动的小圆点设入与图片相同的动画
  8. 即可完成

第一步：敲入html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css轮播图</title>
		<link rel="stylesheet" type="text/css" href="css/lbt.css"/>
	</head>
	<body>
		<!--大盒子box-->
		<div class="box">
			<!--imgsum盒子里嵌套小li装图片-->
			<div class="imgsum">
				<ul>
					<li><img src="img/1.webp"/></li>
					<li><img src="img/2.webp"/></li>
					<li><img src="img/3.webp"/></li>
					<li><img src="img/4.webp"/></li>
					<li><img src="img/5.webp"/></li>
				</ul>
			</div>
			<!--圆点-->
			<div class="yuandian">
					<span class="dot"></span>
					<span class="dot"></span>
					<span class="dot"></span>
					<span class="dot"></span>
					<span class="dot"></span>
					<span class="dot active"></span>	
			</div>
		</div>
	</body>
</html>

效果图为：

 第二步：加入css

首先取消浏览器自带的内外边距，在取消小li自带的小圆点

* {
	margin: 0;
	padding: 0;
	list-style: none;
}

（先设置一个让图片显示在屏幕里的固定盒子，是其多余的图片隐藏）<div class="box">

给大盒子添加样式 

.box {
	width: 800px;
	height: 500px;
	overflow: hidden;
	margin: 100px auto;
	/*加入相对定位 父级元素*/
	position: relative;
}

<div class="imgsum">嵌套小li装图片 ，给其加入样式和动画

.imgsum  {
	width: 4000px;
	height: 500px;
	/*平滑过渡*/
	transition:5s;
	/*动画:动画名称 一共25s 动画以低速结束 规定动画播放无限次（永远）动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。*/ 
	-webkit-animation: img 25s ease-out infinite alternate;
}

（其次插入图片 使其横向排列）

<ul>
                    <li><img src="img/1.webp"/></li>
                    <li><img src="img/2.webp"/></li>
                    <li><img src="img/3.webp"/></li>
                    <li><img src="img/4.webp"/></li>
                </ul>

给图片加入样式

.imgsum ul li img {
	/*添加左浮动 使图片横向排列*/
	float: left;
	width: 800px;
	height: 500px;
}

此时此刻我们的图片呈现为：

给其加入动画 使用@keyframes

@-webkit-keyframes img{
	/*因为我设置的图片宽度为800px,所以在动画到25%时需要向左移动一个照片的宽度,
	在50%的时候需要向左移动两个照片的宽度,
	在75%的时候需要向左移动三个照片的宽度,等等以此类推
	注意:向左移动的时候是负值*/
	
	0% {
		margin-left:0px ;
	}
	25% {
		margin-left: -800px;
	}
	50% {
		margin-left:  -1600px;
	}
	75% {
		margin-left: -2400px;
	}
	100% {
		margin-left: -3200px;
	}
}

到此为止 我们的图片已经可以动起来啦。

下面我们加入小圆点。加入小圆点的方法有很多，我使用了span标签。

           <div class="yuandian">
					<span class="dot"></span>
					<span class="dot"></span>
					<span class="dot"></span>
					<span class="dot"></span>
					<span class="dot"></span>
					<!--移动的小圆点-->
					<span class="dot active"></span>	
			</div>

 给装小圆点的盒子<div class="yuandian">加入样式：

.yuandian {
	/*加入绝对定位 父级元素为.box父相子绝 */
	position: absolute;
	bottom: 0;
	/*修改背景颜色*/
	background-color: #e0eefc40;
	/*自动撑成图片尺寸的100%*/
	left: 0;
	right: 0;
	/*设置高度为50px 水平居中 垂直居中*/
	height: 50px;
	text-align:center;
	/*行高等于高度时就显示垂直居中*/
	line-height: 50px;
}

再给小圆点<span class="dot"></span>加入样式：

.dot {
	/*使span变成行内块元素,将其横排显示*/
	display:inline-block;
	width: 10px;
	height: 10px;
	background: #fff;
	/*这个属性允许设置圆角边框,当设置为50%时可得到一个圆形*/
	border-radius: 50%;
	/*每个小圆点直接都相距2px*/
	margin: 0 2px;
}

给移动的<span class="dot active"></span>    添加样式以及动画，也就是后文说的粉色小球。

.active {
	/*设置定位为绝对定位*/
	position: absolute;
	background-color: pink;
	top: 21px;
	left: 356px;
	/*设置动画,此时粉色小球的动画要与图片保持一致.注:动画名称要改变*/
	animation:dot1 25s ease-out infinite alternate ;
}
@-webkit-keyframes dot1{
	/*移动的粉色小圆点需要跟图片动画保持一致 所以动画到百分比的时候要保持一致
	为什么是左移动356 375px 呢？因为我这次用的动画是用定位做的
	给移动的active小圆点设了绝对定位。*/
	0% {
		left:356px ;
	}
	25% {
		left: 375px;
	}
	50% {
		left:  393px;
	}
	75% {
		left: 412px;
	}
	100% {
		left: 431px;
	}
}
计算粉色小球的移动距离
如何算 粉色小球移动距离

 

# 前端
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟
cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

华为云云原生FinOps解决方案，释放云原生最大价值

avatar 华为云开发者联盟