纯css制作轮播图（自动）最最最最详细的教程

本文主要是介绍纯css制作轮播图（自动）最最最最详细的教程，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

太太太太太太适合新手啦！

因为太详细了····老代码人应该会觉得啰嗦吧····

思路：

先设置一个让图片显示在屏幕里的固定盒子
其次插入图片使其横向排列
将超出固定盒子的图片隐藏住
在设置动画
利用span标签制作小圆点
多设置一个span标签做移动在小圆点之间的小圆点
给移动的小圆点设入与图片相同的动画
即可完成

第一步：敲入html

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>css轮播图</title><link rel="stylesheet" type="text/css" href="css/lbt.css"/></head><body><!--大盒子box--><div class="box"><!--imgsum盒子里嵌套小li装图片--><div class="imgsum"><ul><li><img src="img/1.webp"/></li><li><img src="img/2.webp"/></li><li><img src="img/3.webp"/></li><li><img src="img/4.webp"/></li><li><img src="img/5.webp"/></li></ul></div><!--圆点--><div class="yuandian"><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot active"></span>	</div></div></body>
</html>

效果图为：

第二步：加入css

首先取消浏览器自带的内外边距，在取消小li自带的小圆点

* {margin: 0;padding: 0;list-style: none;
}

（先设置一个让图片显示在屏幕里的固定盒子，是其多余的图片隐藏）<div class="box">

给大盒子添加样式

.box {width: 800px;height: 500px;overflow: hidden;margin: 100px auto;/*加入相对定位 父级元素*/position: relative;
}

<div class="imgsum">嵌套小li装图片，给其加入样式和动画

.imgsum  {width: 4000px;height: 500px;/*平滑过渡*/transition:5s;/*动画:动画名称 一共25s 动画以低速结束 规定动画播放无限次（永远）动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。*/ -webkit-animation: img 25s ease-out infinite alternate;
}

（其次插入图片使其横向排列）

给图片加入样式

.imgsum ul li img {/*添加左浮动 使图片横向排列*/float: left;width: 800px;height: 500px;
}

此时此刻我们的图片呈现为：

给其加入动画使用@keyframes

@-webkit-keyframes img{/*因为我设置的图片宽度为800px,所以在动画到25%时需要向左移动一个照片的宽度,在50%的时候需要向左移动两个照片的宽度,在75%的时候需要向左移动三个照片的宽度,等等以此类推注意:向左移动的时候是负值*/0% {margin-left:0px ;}25% {margin-left: -800px;}50% {margin-left:  -1600px;}75% {margin-left: -2400px;}100% {margin-left: -3200px;}
}

到此为止我们的图片已经可以动起来啦。

下面我们加入小圆点。加入小圆点的方法有很多，我使用了span标签。

           <div class="yuandian"><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><!--移动的小圆点--><span class="dot active"></span>	</div>

给装小圆点的盒子<div class="yuandian">加入样式：

.yuandian {/*加入绝对定位 父级元素为.box父相子绝 */position: absolute;bottom: 0;/*修改背景颜色*/background-color: #e0eefc40;/*自动撑成图片尺寸的100%*/left: 0;right: 0;/*设置高度为50px 水平居中 垂直居中*/height: 50px;text-align:center;/*行高等于高度时就显示垂直居中*/line-height: 50px;
}

再给小圆点<span class="dot"></span>加入样式：

.dot {/*使span变成行内块元素,将其横排显示*/display:inline-block;width: 10px;height: 10px;background: #fff;/*这个属性允许设置圆角边框,当设置为50%时可得到一个圆形*/border-radius: 50%;/*每个小圆点直接都相距2px*/margin: 0 2px;
}

给移动的<span class="dot active"></span> 添加样式以及动画，也就是后文说的粉色小球。

.active {/*设置定位为绝对定位*/position: absolute;background-color: pink;top: 21px;left: 356px;/*设置动画,此时粉色小球的动画要与图片保持一致.注:动画名称要改变*/animation:dot1 25s ease-out infinite alternate ;
}

@-webkit-keyframes dot1{/*移动的粉色小圆点需要跟图片动画保持一致 所以动画到百分比的时候要保持一致为什么是左移动356 375px 呢？因为我这次用的动画是用定位做的给移动的active小圆点设了绝对定位。*/0% {left:356px ;}25% {left: 375px;}50% {left:  393px;}75% {left: 412px;}100% {left: 431px;}
}