（一）
实现方式：
css3的动画属性
animation: name duration timing-function delay iteration-count direction fill-mod
animation-name： 规定需要绑定到选择器的 keyframe 名称。
animation-duration： 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function： 规定动画的速度曲线。
animation-delay： 规定在动画开始之前的延迟。
animation-iteration-count： 规定动画应该播放的次数。
animation-direction： 规定是否应该轮流反向播放动画。
css3的@keyframes规则
@keyframes{
0%,23%{
margin-left：0px；
}
...
}
给每个动画及暂停分配时间，按照总时间的百分比分配；
实践的问题
以三张图片为例制作轮播图，若将最后的数值设置为100%，出现问题在于最后一张到第一张的切换没有动画；尝试给最后一张图片到第一张图片的动画时间，但是中间的切换效果是从最后一张向右滑动直到显示出第一张图，其效果反人类，不美观；但是，通过尝试在最后的一张图片后面在添加一张与第一张相同的图片，可实现循环的效果；
具体内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图</title>
<link rel="stylesheet" href="./Text001.css">
</head>
<body>
<div>
<ul>
<li><img src="../Text_Img/hc2021-cn-1.jpg" alt=""></li>
<li><img src="../Text_Img/hwcloud-promotion-10-3.jpg" alt=""></li>
<li><img src="../Text_Img/vmall-nova9-2.jpg" alt=""></li>
<li><img src="../Text_Img/hc2021-cn-1.jpg" alt=""></li>
</ul>
</div>
</body>
</html>
*{
margin: 0px;
padding: 0px;
}
.div{
width: 1519px;
height: 512px;
/* 居中 */
margin: 0px auto;
/* 用于隐藏超出展示容器的部分内容 */
overflow: hidden;
border: 1px solid black;
}
ul{
width: 9595px;
height: 512px;
animation: switch 5s infinite linear;
}
ul li{
list-style: none;
float: left;
}
ul li img{
width: 1519px;
height: 512px;
}
@keyframes switch{
0%,21%{
margin-left: 0px;
}
26%,47%{
margin-left: -1519px;
}
52%,73%{
margin-left: -3038px;
}
78%,100%{
margin-left: -4557px;
}
}
/* 鼠标滑过图片停止滚动 */
div:hover ul{
animation-play-state: paused;
}
效果展示
轮播图01
（二）
实现方式
方法与一中大致相同，唯一更改的地方是css3的@keyframes规则里面的内容
@keyframes{
from{
margin-left: 0px;
}
to{
margin-left: -1519px;
}
...
}
实践的问题：
若只将要显示的三张图片导入，会出现最后一张图片到第一张图片没有动画效果；通过尝试在最后的一张图片后面在添加一张与第一张相同的图片，可实现循环的效果；
问题在于图片一直处于切换状态，中间没有停顿；
具体内容
*{
margin: 0px;
padding: 0px;
}
.div{
width: 1519px;
height: 512px;
/* 居中 */
margin: 0px auto;
/* 用于隐藏超出展示容器的部分内容 */
overflow: hidden;
border: 1px solid black;
}
ul{
width: 9595px;
height: 512px;
animation: switch 10s infinite linear;
}
ul li{
list-style: none;
float: left;
}
ul li img{
width: 1519px;
height: 512px;
}
@keyframes switch{
from{
margin-left: 0px;
}
to{
margin-left: -4557px;
}
/* 鼠标滑过图片停止滚动 */
div:hover ul{
animation-play-state: paused;
}
效果展示
轮播图02
