輪播圖的實現原理其實是比較簡單的
舉個例子
<div class="main"> <div class="div-main"></div> </div>
main的寬度是100px
div-main的寬度是500px
我們用js控制div-main往左或往右移動，這樣就實現了輪播，簡單把
好了，先介紹個 css3的api
animation: myfirst 5s linear 2s infinite alternate;
myfirst：動畫名
5s：動畫多久執行完
linear：動畫以什么曲線執行
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