相信很多小夥伴做過的專案裡面都有輪播圖這麼一個需求，有的小夥伴可能會自己造輪子，有的小夥伴可能會直接Google輪播圖外掛
但是如果不使用javascript，能不能實現輪播圖的效果呢？或許小夥伴們並沒有考慮過這個問題，那麼下面我們就一起來用css實現一個簡易的輪播圖
基本需求分析
由於css無法做到js一樣的精準操控，所有某些效果是無法實現的，例如在輪播的同時支援用戶左右滑動，所以使用css智能實現基本的效果。以下列出來的內容就是我們實現的：
1、在固定區域中，內部內容自行滑動切換形成播放的效果
2、切換到最後一張內容時，會反向播放或回到起點重播
3、每張內容會停留一段時間，讓用戶能夠看清楚
4、內容可以點擊/進行操作
#dom結構搭建
首先要有一個容器作為輪播圖的容器，同時由於要實現滑動切換，所以內部需要有一個裝載所有待切換內容的子容器
如果子容器中的內容是左右切換的，則需要將內容左右排列開
下面以輪播圖片為例，上代碼
<div class="loop-wrap">
<div class="loop-images-container">
<img src="darksky.jpg" alt="" class="loop-image">
<img src="starsky.jpg" alt="" class="loop-image">
<img src="whiteland.jpg" alt="" class="loop-image">
<img src="darksky.jpg" alt="" class="loop-image">
<img src="starsky.jpg" alt="" class="loop-image">
</div>
</div>.loop-wrap 是主容器
.loop-images-container 是承載內部圖片的子容器
.loop-image 是圖片內容，如果需要顯示其他內容，可以自訂
css實現靜態效果
#輪播圖內每一頁內容的寬高應該相同，且等於主容器.loop-wrap寬高
.loop-images-container的寬高必然有一個大於外部主容器，overflow屬性應該設定為hidden。那為什麼不設定為auto呢？我不告訴你，你可以自己試試看???
.loop-wrap {
position: relative;
width: 500px;
height: 300px;
margin: 100px auto;
overflow: hidden;
}
.loop-images-container{
position: absolute;
left: 0; top: 0;
width: 500%; /* 横向排列 5张图片 宽度应为主容器5倍 */
height: 100%;
font-size: 0;
}
.loop-image{
width: 500px;
height: 300px;
}下面在瀏覽器中打開頁面，就可以看到不帶輪播效果的靜態頁面了，除了第一張圖片，其他圖片都不可見
css實現輪播效果
輪播效果說到底就是一個動畫效果，而透過css3的新屬性animation 我們就可以自訂一個動畫來達到輪播圖效果。下面先來了解一下animation 這個屬性
/* animation: name duration timing-function delay iteration-count direction name: 动画名 duration： 动画持续时间 设置为0则不执行 timing-function：动画速度曲线 delay：动画延迟开始时间 设置为0则不延迟 iteration-count：动画循环次数 设置为infinite则无限次循环 direction：是否应该轮流反向播放动画 normal 否 alternate 是 */
animation 的name 值是動畫名，動畫名可以透過@keyframes 建立自訂動畫規則
分析動畫
要實作輪播，本質上是讓內部承載內容的子容器.loop-images -container 進行位移，從而使不同位置的內容一次展示在用戶眼前
共有五張圖片需要展示，如果輪播總耗時10s，那麼每張圖片應該有2s的時間( 20%)，而每張圖片耗時的構成是切換耗時展示耗時，如果切換耗時500ms(5%)，展示耗時就應該是1500ms(15%)##
#於是這樣改造css.loop-images-container{
position: absolute;
left: 0; top: 0;
width: 500%;
height: 100%;
font-size: 0;
transform: translate(0,0); /* 初始位置位移 */
animation: loop 10s linear infinite;
}
/* 创建loop动画规则 */
/*
轮播5张，总耗时10s，单张应为2s(20%)
单张切换动画耗时500ms，停留1500ms
*/
@keyframes loop {
0% {transform: translate(0,0);}
15% {transform: translate(0,0);} /* 停留1500ms */
20% {transform: translate(-20%,0);} /* 切换500ms 位移-20% */
35% {transform: translate(-20%,0);}
40% {transform: translate(-40%,0);}
55% {transform: translate(-40%,0);}
60% {transform: translate(-60%,0);}
75% {transform: translate(-60%,0);}
80% {transform: translate(-80%,0);}
95% {transform: translate(-80%,0);}
100% {transform: translate(0,0);} /* 复位到第一张图片 */
}direction的alternate ，但是自訂動畫規則的時間間隔也要重新計算了喔！
CSS教學》
以上是如何用CSS寫輪播圖效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
