CSS3制作輪播圖的一種方法

發(fā)布時(shí)間：2019-11-11 15:04:16 作者：佚名

我要評(píng)論

輪播圖，網(wǎng)頁上經(jīng)常能看得見，畫面比較精美，下面是純CSS3的輪播圖的一種，感興趣的朋友一起看看吧

輪播圖，網(wǎng)頁上經(jīng)常能看得見，畫面比較精美，下面是純CSS3的輪播圖的一種

下面是style部分：

這幾行都能明白吧

<style>
    *{margin:0;padding:0;}
    a{text-decoration:none}
    li{list-style:none;}

設(shè)計(jì)寬度不要超過輪播圖片的總寬度再加不到第一張1張圖片的寬度（加第一張1張圖片的寬度是為了輪播效果看得見）我的是1500寬度和200的高度，再設(shè)置溢出隱藏（消除移動(dòng)出顯示區(qū)域還在顯示）

 #box{width:1500px;height:200px;margin:0 auto;overflow:hidden;}

1000%是比較懶的寫法，為了把ul的寬度設(shè)置的寬一點(diǎn)，看著很夸張，因?yàn)橹辽傩枰^總圖片的寬度兩倍再加不到1張圖片的寬度為什么要兩倍呢，因?yàn)閳D片是向左移動(dòng)的（方向自行設(shè)置），移出去了后面沒有圖片補(bǔ)充就沒有輪播效果

了，1000%夠長了，就不用了去計(jì)算總圖片的寬度了，當(dāng)然，圖片夠多也可以不這么設(shè)置，只要設(shè)置總寬度寬度的一半在加上不到一張圖片的寬度。輪播的動(dòng)畫的名字，多少時(shí)間輪播一次

 #box ul{height:200px;width:1000%;animation:animal 4s linear infinite;}

設(shè)置浮動(dòng)讓所有圖片一行顯示和圖片的寬度

 #box ul li{float:left;width:133px;height:200px;}

設(shè)置鼠標(biāo)滑過暫停

#box:hover ul{animation-play-state:paused;}

設(shè)置動(dòng)畫的動(dòng)畫名和輪播圖移動(dòng)方向（動(dòng)畫效果）

    @keyframes animal {
        0%{margin-left:0;}
        100%{margin-left:-1463px;}
    }
</style>

下面是body部分

輪播圖一般都可以點(diǎn)擊訪問，所以放在a標(biāo)簽內(nèi)

<body>
<div id="box">
<ul>
    <li><a href="#"><img src="images/1.jpg" /></a></li>
    <li><a href="#"><img src="images/2.jpg" /></a></li>
    <li><a href="#"><img src="images/3.jpg" /></a></li>
    <li><a href="#"><img src="images/4.jpg" /></a></li>
    <li><a href="#"><img src="images/5.jpg" /></a></li>
    <li><a href="#"><img src="images/6.jpg" /></a></li>
    <li><a href="#"><img src="images/7.jpg" /></a></li>
    <li><a href="#"><img src="images/8.jpg" /></a></li>
    <li><a href="#"><img src="images/9.jpg" /></a></li>
    <li><a href="#"><img src="images/10.jpg" /></a></li>
    <li><a href="#"><img src="images/11.jpg" /></a></li>
    <li><a href="#"><img src="images/1.jpg" /></a></li>
    <li><a href="#"><img src="images/2.jpg" /></a></li>
    <li><a href="#"><img src="images/3.jpg" /></a></li>
    <li><a href="#"><img src="images/4.jpg" /></a></li>
    <li><a href="#"><img src="images/5.jpg" /></a></li>
    <li><a href="#"><img src="images/6.jpg" /></a></li>
    <li><a href="#"><img src="images/7.jpg" /></a></li>
    <li><a href="#"><img src="images/8.jpg" /></a></li>
    <li><a href="#"><img src="images/9.jpg" /></a></li>
    <li><a href="#"><img src="images/10.jpg" /></a></li>
    <li><a href="#"><img src="images/11.jpg" /></a></li>
    <li><a href="#"><img src="images/1.jpg" /></a></li>
</ul>
</div>
</body>

實(shí)現(xiàn)輪播圖的的方法不止一種。下次小編再給大家分享！