示例图
- 设置两个盒子，父类作为视口里面加入一个图片，子类存放图片
- 给视口设置固定定位，子类设置绝对定位，这样轮播图才可以滚动
- 设置图片大小
3.1 手机端:将图片设置为100vw
3.2 pc端:将图片设为200px
注:图片设置大小可按自己需求 - 不设置盒子的宽高可以省去计算的麻烦，加入图片之后盒子便可以又图片将盒子撑开
- 在视口里面面，盒子外面加入一个图片，撑开视口，用visibility:hidden;将这个图片隐藏，但是仍然占据位置,便可以不用设置视口盒子大小
- 视口用overflow：hidden；将视口外面的图片隐藏起来
- 设置动画
- 在放置图片的盒子里面加入定义动画
圆点设置方式类似于图片,只是每个圆点颜色需要单独设置一个动画,
- 图片移动时间和圆点移动时间一样
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.lunbo{
/* 视口,图片显示出来的框 */
/* 超出部分隐藏 */
overflow: hidden;
position: fixed;
}
.lunbo .images img{
/* 手机端 */
/* width: 100vw; */
/* pc */
width: 400px;
/* 去除图片周围空白 */
display: block;
}
.fix{
/* 手机端 */
/* width: 100vw; */
/* pc */
width: 400px;
/* 占位的图片 */
visibility: hidden;
}
.lunbo .images{
display: flex;
border: 1px solid blue;
/* 加了相对定位和绝对定位以后,才会移动 */
position: absolute;
/* 定义动画 */
animation: move 6s infinite;
/* 第一个数值为设置的动画名称,第二个数值为轮播一圈时间,第三个数值为无限循环 */
}
/* 设置动画 */
@keyframes move {
0%{
left: 0;
}
33.33%{
left: -400px;
}
66.66%{
left: -800px;
}
100%{
left: -1200px;
}
}
/* 为圆点设置样式 */
.yuandian{
position: absolute;
z-index: 1;
bottom: 10px;
display: flex;
justify-content: center;
width: 100%;
}
.dian~.dian{
margin-left: 10px;
}
.yuandian .dian{
width: 10px;
height: 10px;
border-radius: 5px;
background-color: aqua;
}
<!--设置圆点动画 -->
.dian1{
animation: dian1 6s infinite;
}
.dian2{
animation: dian2 6s infinite;
}
.dian3{
animation: dian3 6s infinite;
}
@keyframes dian1 {
0%{
background-color: brown;
}
33.33%{
background-color: aqua;
}
66.66%{
background-color: aqua;
}
100%{
background-color: brown;
}
}
@keyframes dian2 {
0%{
background-color: aqua;
}
33.33%{
background-color: brown;
}
66.66%{
background-color: aqua;
}
100%{
background-color: aqua;
}
}
@keyframes dian3 {
0%{
background-color: aqua;
}
33.33%{
background-color: aqua;
}
66.66%{
background-color: brown;
}
100%{
background-color: aqua;
}
}
</style>
</head>
<body>
<div class="lunbo">
<div class="images">
<img src="https://static.maizuo.com/v5/upload/6f5e10201aaea65b311d7ab562ba097c.jpg?x-oss-process=image/quality,Q_70" alt="">
<img src="https://static.maizuo.com/v5/upload/67f9eb733fd33f6148ae740e130d5612.jpg?x-oss-process=image/quality,Q_70" alt="">
<img src="https://static.maizuo.com/v5/upload/fae22ffcaa41eced5e3dc7a0f2873690.jpg?x-oss-process=image/quality,Q_70" alt="">
<img src="https://static.maizuo.com/v5/upload/6f5e10201aaea65b311d7ab562ba097c.jpg?x-oss-process=image/quality,Q_70" alt="">
</div>
<img class="fix" src="https://static.maizuo.com/v5/upload/6f5e10201aaea65b311d7ab562ba097c.jpg?x-oss-process=image/quality,Q_70" alt="">
<!--设置圆点 -->
<div class="yuandian">
<div class="dian1 dian"></div>
<div class="dian2 dian"></div>
<div class="dian3 dian"></div>
</div>
</div>
</body>
</html>
