效果图
方法：使用动画实现功能；鼠标悬停可以实现暂停
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<link rel="stylesheet" href="../css/reset.css">
<style type="text/css">
/* 幻灯片背景 */
.content{
background: #A1634C; margin: 100px auto;
animation: bj 10s linear infinite;
}
/* 幻灯片盒子，显示 */
.box{
width: 800px; height: 300px; margin: 0 auto;
overflow: hidden; position: relative;
}
/* 整体幻灯片 */
.box .slide{
width: 400%; height: 100%;
position: absolute; top: 0; left: 0;
animation: slide 10s linear infinite;
}
/* 鼠标悬停幻灯片停止 */
.content:hover, .content:hover .slide{
animation-play-state: paused;
}
/* 转换a标签，布局浮动 */
.box .slide a{
display: block; width: 25%; height: 100%; float: left;
}
/* 设置图片大小 */
.box .slide img{
width: 100%; height: 100%;
}
/* 幻灯片动画 */
@keyframes slide {
0%{left: 0%;}
30%{left: 0%;}
33%{left: -100%;}
64%{left: -100%;}
67%{left: -200%;}
95%{left: -200%;}
100%{left: -300%;}
/* 100%{left: -400%;} 这样写错误，导致超出幻灯片显示后面空白 */
}
/* 背景颜色：#A1634C #D0D4DA #86572B*/
/* 颜色动画：要比幻灯片快一点点 */
@keyframes bj {
0%{background: #A1634C;}
29%{background: #A1634C;}
33%{background: #D0D4DA;}
63%{background: #D0D4DA;}
67%{background: #86572B;}
94%{background: #86572B;}
97%{background: #A1634C;}
}
</style>
</head>
<body>
<div class="content">
<div class="box">
<div class="slide">
<a href="#"><img src="../img/img0.jpg"></a>
<a href="#"><img src="../img/img1.jpg"></a>
<a href="#"><img src="../img/img6.jpg"></a>
<!-- 末尾重复第一张图片，显得连贯性 -->
<a href="#"><img src="../img/img0.jpg"></a>
</div>
</div>
</div>
</body>
</html>