純css實現輪播圖

時間 2019-11-09

標籤 css 實現欄目 CSS 简体版

原文原文鏈接

輪播圖的實現原理實際上是比較簡單的css

舉個例子 html

<div  class="main">
<div class="div-main"></div>
</div>

main的寬度是100pxcss3

div-main的寬度是500pxapi

咱們用js控制div-main往左或往右移動，這樣就實現了輪播，簡單把css3動畫

好了，先介紹個 css3的api 動畫

animation: myfirst 5s linear 2s infinite alternate;ui

myfirst：動畫名spa

5s：動畫多久執行完code

linear：動畫以什麼曲線執行htm

2s：動畫延遲多長時間執行

infinite：該參數是動畫一直循環，能夠寫數字也行

alternate：只動畫在倒過來執行

先介紹到這裏，完整用法能夠參考：css3動畫api參考

下面上代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>RunJS</title>
    </head>
    <body>
        <div id="frame" >
    <div id="photos" class="play">
        <div class="img"></div>
        <div class="img"></div>
        <div class="img"></div>
        <div class="img"></div>
        <ul id="dis">
            <li>111111111111111</li>
            <li>22222222222222</li>
            <li>33333333333333</li>
            <li>44444444444444</li>
        </ul>
    </div>
</div>
    </body>
</html>

   #frame{position:absolute;width:302px;height:200px;overflow:hidden;border-radius:5px}
    #dis{position:absolute;left:-50px;top:-10px;opacity:.5}
    #dis li{display:inline-block;width:200px;height:20px;margin:0 50px;float:left;text-align:center;color:#fff;border-radius:10px;background:#000}
    #photos .img{float:left;width:300px;height:200px;background-color:red;border-left:1px solid blue;}
    #photos {  position: absolute;z-index:9;  width: calc(301px * 4);/*---修改圖片數量的話須要修改下面的動畫參數*/  }
    .play{ animation: ma 5s ease-out infinite alternate;}
    @keyframes ma {
        0%,25% {        margin-left: 0px;       }
        30%,50% {       margin-left: -300px;    }
        55%,75% {       margin-left: -600px;    }
        80%,100% {       margin-left: -900px;    }

    }

正所謂什麼代碼也比不上一個在線運行demo

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。