[email protected]的轮播图效果实现

今天想用css做一个轮播效果图,在网上看了很久,发现大多数说的都不是很清楚,所以想把自己的一些心得记录下来.

首先要理清思路,要怎样实现一个轮播效果呢?说白了,我们看到的视图可以理解为一个相框,图片依次从相框中路过,就是这样一个效果.

所以首先,我们设置一个div作为相框,设置它的长宽.

然后设置图片的长宽, 我们可以理解为图片的整体是这个相框的n倍,每次相框中露出的图片都是它的1/n.

最后设置animation和@keyfirame的值就可以,我先把代码粘贴上来  然后在仔细记录解答:

html:

<div>

  <ul>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

  </ul>

</div>

css:

div {

  position: relative;

  width: 600px;

  height: 200px;

  overflow:hidden;

}

div ul {

  position:relative;

  width: 400%;

  height: 100%;

  overflow:hidden;

  animation:myFirst 12s infinite;

  animation-timing-function: cubic-bezier(0,0,0.1,1);

  animation-fill-mode:backwards;

  margin:0;  //取消边距   我是在chrome浏览器下操作的  出现了一个上下边距  所以这个是用来取消的  下面我会说下是怎么回事  

}

div ul li{

  position:relative;

  width:25%;

  height:100%;

  float:left;

  list-style: none;

}

div ul li:nth-child(1){

  background-color:red;

}

div ul li:nth-child(2){

  background-color:green;

}

div ul li:nth-child(3){

  background-color:pink;

}

div ul li:nth-child(4){

  background-color:blue;

}

@keyframes myFirst{

  0%{

    left:0%;

  }

  25%{

    left:-100%;

  }

  50%{

    left:-200%;

  }

  75%{

    left:-300%;

  }

  100%{

    left:0%;

  }

}

input{

  position:relative;

  display:none;

}

div就是相框,ul就是所有图片排列成一行的样子,因为要在一行,所以在ul中我们加了左浮动.因为ul整体的图片长于相框,所以我们提前在其中加上overflow避免溢出.

因为这次设置的position属性全是relative  所以 子元素的长宽都是按照父元素的比例来的  

在最后设置下animation与@keyframe的相关属性数值就好了.

主要的坑我觉得还是思路要理清楚  当然我的小师傅告诉我 如果实现轮播效果 还是js更好一些  因为这个出现了一个状况就是设置轮回播放的时候   会迅速蹦到第一张图片  不流畅  我会在研究研究  然后发出来的.

另外我上面提到ul出现了一个外边距   是chrome自带的一个属性值  在以前的时候  往往大家会直接用* { padding: 0; margin: 0; border: 0; } 来强制霸道的将所有都设置为0 但是这样往往在自己做其他的页面时候不会好看 所以统一的一

般会引用Normalize.css 但是现在基本没有自己纯写的页面 都会引入包 所以这个问题基本是已经调试过的 不用担心 知道就可以了