[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 但是現在基本沒有自己純寫的頁面 都會引入包 是以這個問題基本是已經調試過的 不用擔心 知道就可以了