设计
- 一个主容器+一个图形链;
- 图像加分步动画实现轮播;
- 鼠标移上去可暂停;
- 显示当前图片页码;
写出html基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css轮播</title>
</head>
<body>
<!--轮播-->
<div class="scroll-photo">
<!--图片组-->
<div class="photos">
<img src="./photo/1.jpg" alt="">
<img src="./photo/2.jpg" alt="">
<img src="./photo/3.jpg" alt="">
<img src="./photo/4.jpg" alt="">
</div>
<!--页码-->
<div class="index">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</body>
</html>
加一些基本样式
<style type="text/css">
*{padding: 0;margin: 0;}
body{
width: 100vw;
height: 100vh;
background: #82ccdd;
display: flex;
justify-content: center;
align-items: center;
}
div.scroll-photo{
position: absolute;
width: 400px;
height: 300px;
overflow: hidden;
}
div.photos{
position: absolute;
width: 1600px;
height: 300px;
z-index: -1;
}
div.photos img{
position: relative;
width: 400px;
height: 300px;
float: left;
}
div.index ul{
position: absolute;
display: grid;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
list-style: none;
width: 200px;
grid-template: 1fr/repeat(4,1fr);
justify-items: center;
}
div.index ul::after{
content: '';
position: absolute;
top: 0;
left: 12.5px;
width: 25px;
height: 25px;
border-radius: 50%;
z-index: -1;
background: #d63031;
}
div.index ul li{
position: relative;
width: 25px;
height: 25px;
border-radius: 50%;
color: #FFF;
background: rgba(0,0,0,.5);
display: grid;
justify-content: center;
align-items: center;
}
</style>
现在的效果
让他们动起来
/**
* 滚动
*/
div.photos{
animation:scroll 8s steps(4,end);
animation-iteration-count: infinite;
}
div.index ul::after{
animation:index-scroll 8s steps(4,end);
animation-iteration-count: infinite;
}
@keyframes scroll{
to{
transform: translateX(-1600px);
}
}
@keyframes index-scroll{
to{
transform: translateX(200px);
}
}
现在的效果
鼠标悬停停止
/**
* 鼠标悬停效果
*/
div.scroll-photo:hover div.photos,
div.scroll-photo:hover div.index ul::after{
animation-play-state: paused;
}
成品代码和效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css轮播</title>
<style type="text/css">
/**
* 基本样式
*/
*{padding: 0;margin: 0;}
body{
width: 100vw;
height: 100vh;
background: #82ccdd;
display: flex;
justify-content: center;
align-items: center;
}
div.scroll-photo{
position: absolute;
width: 400px;
height: 300px;
overflow: hidden;
cursor: pointer;
}
div.photos{
position: absolute;
width: 1600px;
height: 300px;
z-index: -1;
}
div.photos img{
position: relative;
width: 400px;
height: 300px;
float: left;
}
div.index ul{
position: absolute;
display: grid;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
list-style: none;
width: 200px;
grid-template: 1fr/repeat(4,1fr);
justify-items: center;
}
div.index ul::after{
content: '';
position: absolute;
top: 0;
left: 12.5px;
width: 25px;
height: 25px;
border-radius: 50%;
z-index: -1;
background: #d63031;
}
div.index ul li{
position: relative;
width: 25px;
height: 25px;
border-radius: 50%;
color: #FFF;
background: rgba(0,0,0,.5);
display: grid;
justify-content: center;
align-items: center;
}
/**
* 滚动
*/
div.photos{
animation:scroll 8s steps(4,end);
animation-iteration-count: infinite;
}
div.index ul::after{
animation:index-scroll 8s steps(4,end);
animation-iteration-count: infinite;
}
@keyframes scroll{
to{
transform: translateX(-1600px);
}
}
@keyframes index-scroll{
to{
transform: translateX(200px);
}
}
/**
* 鼠标悬停效果
*/
div.scroll-photo:hover div.photos,
div.scroll-photo:hover div.index ul::after{
animation-play-state: paused;
}
</style>
</head>
<body>
<!--轮播-->
<div class="scroll-photo">
<!--图片组-->
<div class="photos">
<img src="./photo/1.jpg" alt="">
<img src="./photo/2.jpg" alt="">
<img src="./photo/3.jpg" alt="">
<img src="./photo/4.jpg" alt="">
</div>
<!--页码-->
<div class="index">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</body>
</html>
成品效果(注:已经测试得知鼠标悬停功能不完美兼容火狐浏览器):