css实现轮播图

一，创建适合图片大小的盒子将图片和下方小圆点放进去

1.创建一个盒子，为方便后续将底部小圆点固定在盒子底部的中间位置，将盒子的position属性设置为relative，将超出盒子范围的图片设置为隐藏

2.设置图片样式

3.在HTML中设置一个ul列表并删除列表项目样式。

4.设置ul列表的宽度保证可以装下所有图片

5.在ul标签中添加小li标签，每个小li标签放入一个图片

.slide{
  position: relative;
  height: 250px;
  width:520px;
  /* background-color: rgb(94, 156, 249); */
  overflow: hidden;
}
.slide img{
  height: 250px;
  width:520px;
  border-radius: 12px;
}
.slide ul{
  list-style: none;
  width:3120px;
  animation: swiperRun 10s infinite 2s running;
}
.slide li {
  float: left;
}

添加到html中 

<div class="slide">
        <ul class="swiper">
            <li><img src="img\lunbotu-img1.webp" ></li>
                <li><img src="img\lunbotu-img2.jpg"></li>
                <li><img src="img\lunbotu-img3.webp"></li>
                <li><img src="img\lunbotu-img4.jpg"></li>
                <li><img src="img\market-image5.webp"></li>
                <li><img src="img\lunbotu-img1.webp" ></li>
                
        </ul>

二，创建一个盒子将下方一排小圆点装进去

1.设置一个大盒子，在大盒子里放一些小正方形盒子，将小盒子的背景改为白色，边缘柔滑50%即可得到一排白色小圆点

2.使用opacity，从0-1表示元素的可见度，在0时会完全看不见，1表示完全可见。

.circle {
  position: absolute;
  width: 200px;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 10px;
}

.circle div {
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: white;
  opacity: 0.4;
  float: left;
  margin: 0 5px;
}

三，创建另外一个红色小圆点

1.创建该小圆点下面使它随着轮播图的转换变换位置

2.animation-play-state 属性规定动画正在运行还是暂停。

语法：animation-play-state: paused|running;

paused 规定动画已暂停。

running 规定动画正在播放。

.circle .active {
  opacity: 1;
  transform: translateX(20px);
  background-color: rgb(244, 33, 33);
  animation: circleRun 10s infinite 2s running;
}

 html：

<!-- 这里是轮播图上的小圆点 -->
        <div class="circle">
            <div class="active"></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>

四，让图片和小圆点动起来

1.使用@keyframes 创建动画。

2.使用transform: translateX();改变X轴坐标，从而实现图片的切换

 /*图片 */
@keyframes swiperRun {
  0% {
      transform: translateX(0px);
  }
  10%,20%{
    transform: translateX(-520px);
   }
 
 30%,40%{
  transform: translateX(-1040px);
 }
 50%,60%{
  transform: translateX(-1560px);
 }
 70%,80%{
  transform: translateX(-2080px);
 }
 90%,100%{
  transform: translateX(-2600px);
 }
}
 /圆点*/
@keyframes circleRun {
0% {
    transform: translateX(20px);
}
10%{
  transform: translateX(40px);
 }
20%{
transform: translateX(40px);
}
30%{
transform: translateX(60px);
}
40%{
transform: translateX(60px);
}
50%{
transform: translateX(80px);
}
60%{
transform: translateX(80px);
}
70%{
transform: translateX(100px);
}
80%{
transform: translateX(100px);
}
90%{
transform: translateX(20px);
}
100%{
transform: translateX(20px);
}
}