手把手教你用纯css3实现轮播图效果

这个时候我们的轮播图可以动了

四、添加轮播焦点

添加轮播焦点当然不是为了点击，而是告诉访问者这里有几张图片和目前图片的位置，至少以我个人而言，轮播焦点很重要，因为如果我不知道轮播的图片有几张，我又没有办法点击，我就会非常不安，感觉自己没有看到整个网页的全貌。所以我们还是添加一下轮播焦点。首先非常明确的这个仍然可以使用上面的动画，另外布局肯定使用position：absolute，另外很明显焦点我们必须写两次，一次是当前图片的样式，一次是非当前图片的样式

真题解析、进阶学习笔记、最新讲解视频、实战项目源码、学习路线大纲
详情关注公中号【编程进阶路】

us-item4">

• .focus-container{
  position:absolute;
  bottom:2%;
  z-index:7;
  margin:0 auto;
  left:0;
  right:0;
  }
  .focus-container ul{
  margin-left:46%;
  }
  .focus-container li{
  width:10px;
  height:10px;
  border-radius:50%;
  float:left;
  margin-right:10px;
  background:#fff;
  }
  .focus-item{
  width:100%;
  height:100%;
  background:#51B1D9;
  border-radius:inherit;
  animation-duration: 20s;
  animation-timing-function: linear;
  animation-name:fade;
  animation-iteration-count: infinite;
  }
  .focus-item1{
  animation-delay: -1s;
  }
  .focus-item2{
  animation-delay: 3s;
  }
  .focus-item3{
  animation-delay: 7s;
  }
  .focus-item4{
  animation-delay: 11s;
  }
  .focus-item5{
  animation-delay: 15s;
  }

  五、梳理代码

  如果你维护过别人的代码你就会知道，代码梳理对于后期维护的重要性了，没有经过梳理的css代码，随心所欲写到哪里就是哪里，对于后期维护来说简直就是一场灾难，css代码梳理个人认为首先必须添加必要的注释，将css代码分区，另外就是尽量减少后期修改需要修改的地方，这个主要是代码重构的问题，这个问题我已经在编写代码的时候考虑到了，所以主要任务就是添加注释和告诉维护者代码最常修改的地方，我们遵循最常修改的代码放到最后的原则。
  我们来分析一下我们的代码如果给别人用可能需要修改的地方，首先肯定是图片路径，所以我们把这个样式放在最后，然后是图片高度，轮播焦点的颜色，动画时间的设置（这里还涉及图片个数），轮播焦点的位置，当然轮播焦点大小也可能修改。重构后代码如下：

  /css reset start/
  *{
  margin:0;
  padding:0;
  }
  ul,li{
  list-style: none;
  }
  /css reset end/

  /css public start/
  .floatfix {
  *zoom: 1;
  }
  .floatfix:after {
  content: “”;
  display: table;
  clear: both;
  }
  /css public end/

  /slider start/
  .slider-contaner{
  width:100%;
  position:relative;
  }
  .slider-item + .slider-item{
  opacity:0;
  }
  .slider-item{
  width:100%;
  position:absolute;
  animation-timing-function: linear;
  animation-name:fade;
  animation-iteration-count: infinite;
  background-size:100%;
  }
  .focus-container{
  position:absolute;
  z-index:7;
  margin:0 auto;
  left:0;
  right:0;
  }
  .focus-container li{
  width:10px;
  height:10px;
  border-radius:50%;
  float:left;
  margin-right:10px;
  background:#fff;
  }
  .focus-item{
  width:100%;
  height:100%;
  border-radius:inherit;
  animation-timing-function: linear;
  animation-name:fade;
  animation-iteration-count: infinite;
  }
  .focus-item2,.focus-item3,.focus-item4,.focus-item5{
  opacity:0;
  }
  .focus-container ul{
  margin-left:46%;
  }
  /设置轮播焦点的位置/
  .focus-container{
  bottom:2%;
  }
  /设置当前图片焦点的颜色/
  .focus-item{
  background:#51B1D9;
  }
  /设置动画，请根据实际需要修改秒数/
  .slider-item,.focus-item{
  animation-duration: 20s;
  }
  .slider-item1,.focus-item1{
  animation-delay: -1s;
  }
  .slider-item2,.focus-item2{
  animation-delay: 3s;
  }
  .slider-item3,.focus-item3{
  animation-delay: 7s;
  }
  .slider-item4,.focus-item4{
  animation-delay: 11s;
  }
  .slider-item5,.focus-item5{
  animation-delay: 15s;
  }
  @keyframes fade{
  0%{
  opacity:0;
  z-index:2;
  }
  5%{
  opacity:1;
  z-index: 1;
  }
  20%{
  opacity:1;
  z-index:1;
  }
  25%{
  opacity:0;
  z-index:0;
  }
  100%{
  opacity:0;
  z-index:0;
  }
  }
  /设置背景，响应式请利用媒体查询根据断点修改路径/
  .slider-item1{
  background-image:url(imgs/1.jpg);
  }
  .slider-item2{
  background-image:url(imgs/2.jpg);
  }
  .slider-item3{
  background-image:url(imgs/3.jpg);
  }
  .slider-item4{

  基础学习：

  前端最基础的就是 HTML , CSS 和 JavaScript 。

  网页设计：HTML和CSS基础知识的学习

  HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

  

  CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

  

  动态交互：JavaScript基础的学习

  JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

  SS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

  [外链图片转存中…(img-awPrnYOX-1720780059535)]

  动态交互：JavaScript基础的学习

  JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。