<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯CSS实现带缩略图的简单图片自动轮播</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
html,
body {
height: 100%;
width: 100%;
background: #fcfcfc;
}
.slide {
/* 写相对定位是因为一会轮播图上的小圆点需要做绝对定位 */
position: fixed;
/* 让轮播图在页面中居中 */
margin: auto;
/* 宽度和高度就是一张图的宽和高 */
width: 900px;
height: 500px;
/* 只显示一张图，其他超出盒子的图片先隐藏掉 */
overflow: hidden;
/* 居中 */
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 15px;
}
ul {
list-style: none;
/* 宽度尽量写大，确保能放下所有的图片 */
width: 9999px;
/* 控制ul开始做位置移动（利用css动画特性来实现===核心代码） */
animation: swiperRun 10s infinite 2s running;
}
li {
width: 900px;
height: 500px;
float: left;
}
img {
width: 100%;
height: 100%;
}
.small_list{
width: 560px;
position: absolute;
overflow: hidden;
left: 50%;
bottom: -7%;
transform: translate(-50%, -50%);
}
.small_list img{
float: left;
width: 120px;
height: 80px;
border-radius: 10px;
}
.small_list div{
float: left;
margin:10px;
z-index: 1;
border-radius: 10px;
}
.small_list .active{
border-radius: 10px;
position: absolute;
background: none;
width: 120px;
height: 80px;
border:5px solid #ff0;
opacity: 0.7;
left:-5px;
top:-5px;
z-index:0;
animation: backRun 10s infinite 2s running;
}
/* 鼠标滑过暂停播放 */
.slide:hover ul,.slide:hover .active{
animation-play-state: paused;
cursor: pointer;
}
.circle .active {
opacity: 1;
transform: translateX(20px);
background-color: #FFF;
animation: circleRun 10s infinite 2s running;
}
/* 让图片动起来的动画 */
@keyframes swiperRun {
/* 第一张 */
0% {
transform: translateX(0px);
}
/* 第二张 */
5% {
transform: translateX(-900px);
}
25% {
transform: translateX(-900px);
}
/* 第三张 */
30% {
transform: translateX(-1800px);
}
50% {
transform: translateX(-1800px);
}
/* 第四张 */
55% {
transform: translateX(-2700px);
}
75% {
transform: translateX(-2700px);
}
/* 第五张 */
80% {
transform: translateX(-3600px);
}
100% {
transform: translateX(-3600px);
}
}
@keyframes backRun {
/* 第一个点 */
0% {
transform: translateX(0px);
opacity: 0.7;
}
/* 第二个点 */
5% {
transform: translateX(140px);
opacity: 0.7;
}
25% {
transform: translateX(140px);
opacity: 0.7;
}
/* 第三个点 */
30% {
transform: translateX(280px);
opacity: 0.7;
}
50% {
transform: translateX(280px);
opacity: 0.7;
}
/* 第四个点 */
55% {
transform: translateX(420px);
opacity: 0.7;
}
75% {
transform: translateX(420px);
opacity: 0.7;
}
77% {
transform: translateX(0px);
opacity: 0;
}
/* 第五个点 移出去 */
80% {
transform: translateX(0px);
opacity: 0.7;
}
100% {
transform: translateX(0px);
opacity: 1;
}
}
</style>
</head>
<body>
<!-- slide是轮播图区域 -->
<div class="slide">
<!-- swiper里面放的是图片-->
<ul class="swiper">
<li><img src="images/0001.jpg" alt=""></li>
<li><img src="images/0002.jpg" alt=""></li>
<li><img src="images/0003.jpg" alt=""></li>
<li><img src="images/0004.jpg" alt=""></li>
<li><img src="images/0001.jpg" alt=""></li>
</ul>
<!-- 缩略图 -->
<div class="small_list">
<div class="active"></div>
<div><img src="images/0001.jpg" alt=""></div>
<div><img src="images/0002.jpg" alt=""></div>
<div><img src="images/0003.jpg" alt=""></div>
<div><img src="images/0004.jpg" alt=""></div>
</div>
</div>
</body>
</html>
