這篇文章給大家分享的是css輪播圖的制作步驟，相信大部分人都還沒(méi)學(xué)會(huì)這個(gè)技能，為了讓大家更加了解，給大家總結(jié)了以下內(nèi)容，話不多說(shuō)，一起往下看吧。

創(chuàng)新互聯(lián)是創(chuàng)新、創(chuàng)意、研發(fā)型一體的綜合型網(wǎng)站建設(shè)公司，自成立以來(lái)公司不斷探索創(chuàng)新，始終堅(jiān)持為客戶提供滿意周到的服務(wù)，在本地打下了良好的口碑，在過(guò)去的十載時(shí)間我們累計(jì)服務(wù)了上千家以及全國(guó)政企客戶，如崗?fù)?/a>等企業(yè)單位，完善的項(xiàng)目管理流程，嚴(yán)格把控項(xiàng)目進(jìn)度與質(zhì)量監(jiān)控加上過(guò)硬的技術(shù)實(shí)力獲得客戶的一致贊賞。

基本需求分析

由于css無(wú)法做到j(luò)s一樣的精準(zhǔn)操控，所有某些效果是無(wú)法實(shí)現(xiàn)的，比如在輪播的同時(shí)支持用戶左右滑動(dòng)，所以使用css智能實(shí)現(xiàn)基本的效果。下面列出來(lái)的內(nèi)容就是我們實(shí)現(xiàn)的：

1、在固定區(qū)域中，內(nèi)部?jī)?nèi)容自行滑動(dòng)切換形成播放的效果

2、當(dāng)切換到最后一張內(nèi)容時(shí)，會(huì)反向播放或者回到起點(diǎn)重播

3、每張內(nèi)容會(huì)停留一段時(shí)間，讓用戶能夠看清楚

4、內(nèi)容可以點(diǎn)擊/進(jìn)行操作

dom結(jié)構(gòu)搭建

首先要有一個(gè)容器作為輪播圖的容器，同時(shí)由于要實(shí)現(xiàn)滑動(dòng)切換，所以內(nèi)部需要有一個(gè)裝載所有待切換內(nèi)容的子容器

如果子容器中的內(nèi)容是左右切換的，則需要將內(nèi)容左右排列開(kāi)

下面以輪播圖片為例，上代碼

.loop-wrap 是主容器

.loop-images-container 是承載內(nèi)部圖片的子容器

.loop-image 是圖片內(nèi)容，如果需要顯示其他內(nèi)容，可以自定義

css實(shí)現(xiàn)靜態(tài)效果

輪播圖內(nèi)每一頁(yè)內(nèi)容的寬高應(yīng)該相同，且等于主容器.loop-wrap寬高

.loop-images-container的寬高必然有一個(gè)大于外部主容器，overflow屬性應(yīng)該設(shè)置為hidden。那為什么不設(shè)置為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張圖片 寬度應(yīng)為主容器5倍 */
    height: 100%;
    font-size: 0;
}
.loop-image{
    width: 500px;
    height: 300px;
}

下面在瀏覽器中打開(kāi)頁(yè)面，就可以看到不帶輪播效果的靜態(tài)頁(yè)面了，除了第一張圖片，其他圖片都不可見(jiàn)

css實(shí)現(xiàn)輪播效果

輪播效果說(shuō)到底就是一個(gè)動(dòng)畫(huà)效果，而通過(guò)css3的新屬性 animation 我們就可以自定義一個(gè)動(dòng)畫(huà)來(lái)達(dá)到輪播圖效果。下面先來(lái)了解一下 animation 這個(gè)屬性

/*
animation: name duration timing-function delay iteration-count direction
name: 動(dòng)畫(huà)名
duration： 動(dòng)畫(huà)持續(xù)時(shí)間 設(shè)置為0則不執(zhí)行
timing-function：動(dòng)畫(huà)速度曲線
delay：動(dòng)畫(huà)延遲開(kāi)始時(shí)間 設(shè)置為0則不延遲
iteration-count：動(dòng)畫(huà)循環(huán)次數(shù) 設(shè)置為infinite則無(wú)限次循環(huán)
direction：是否應(yīng)該輪流反向播放動(dòng)畫(huà) normal 否 alternate 是
*/

animation 的 name 值是動(dòng)畫(huà)名，動(dòng)畫(huà)名可以通過(guò) @keyframes 創(chuàng)建自定義動(dòng)畫(huà)規(guī)則

分析動(dòng)畫(huà)

要實(shí)現(xiàn)輪播，本質(zhì)上是使內(nèi)部承載內(nèi)容的子容器 .loop-images-container 進(jìn)行位移，從而使不同位置的內(nèi)容一次展示在用戶眼前

共有五張圖片需要展示，如果輪播總耗時(shí)10s，那么每張圖片應(yīng)該有2s的時(shí)間(20%)，而每張圖片耗時(shí)的構(gòu)成是切換耗時(shí)+展示耗時(shí)，如果切換耗時(shí)500ms(5%)，展示耗時(shí)就應(yīng)該是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;
}
/* 創(chuàng)建loop動(dòng)畫(huà)規(guī)則 */
/* 
   輪播5張，總耗時(shí)10s，單張應(yīng)為2s(20%)
   單張切換動(dòng)畫(huà)耗時(shí)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);} /* 復(fù)位到第一張圖片 */
}

純css實(shí)現(xiàn)輪播圖效果完成

這是一個(gè)方向的輪播效果，想要實(shí)現(xiàn)往返方向的輪播效果，小伙伴們可以試試direction的alternate，但是自定義動(dòng)畫(huà)規(guī)則的時(shí)間間隔也要重新計(jì)算了哦！

關(guān)于css輪播圖的制作就分享到這里了，解決問(wèn)題并不止文章中和大家分析的辦法，不過(guò)本文分析的方法準(zhǔn)確性是不容置疑的。如果喜歡本篇文章，不妨把它分享出去讓更多的人看到。