css3動畫使用技巧之—JQ配合css3實現輪播之animation-delay應用 1 2 3 4 5 ...
<!DOCTYPE html> <html> <head> <title>css3動畫使用技巧之—JQ配合css3實現輪播之animation-delay應用</title> <meta charset="utf-8" /> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var rel=0 $(".num").each(function(i){ $(this).click(function(){ rel=$(this).attr("rel")-1 $(this).css("background","#ccc").siblings().css("background","red"); $(".play").css("animation","none").animate({ 'margin-left':'-300'*rel+'px' },500) setTimeout(dq,10) }) }) function dq(){ $(".play").css({ 'animation-name': 'ma', 'animation-duration': '10s', 'animation-timing-function': 'ease-out', 'animation-delay': '-10'+2*rel+'s', 'animation-iteration-count':'infinite', 'animation-direction': 'alternate', }) } }) </script> <meta name="author" content="R.tian @eduppp.cn 2015"> <link rel="shortcut icon" href="http://eduppp.cn/images/logo4.gif" /> <link rel="apple-touch-icon" href="http://eduppp.cn/images/logo.gif" /> <style type="text/css"> #frame {/*----------圖片輪播相框容器----------*/ position: absolute; /*--絕對定位，方便子元素的定位*/ width: 300px; height: 200px; overflow: hidden;/*--相框作用，只顯示一個圖片---*/ border-radius:5px; } #dis {/*--絕對定位方便li圖片簡介的自動分佈定位---*/ position: absolute; left: -50px; top: -10px; opacity: 0.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; } #photos {/*---設置總的圖片寬度--通過位移來達到輪播效果----*/ position: absolute;z-index:9px; width: calc(300px * 5);/*---修改圖片數量的話需要修改下麵的動畫參數*/ } .play{ animation: ma 10s ease-out infinite alternate;/**/ } @keyframes ma {/*---每圖片切換有兩個階段：位移切換和靜置。中間的效果可以任意定製----*/ 0%,20% { margin-left: 0px; } 25%,40% { margin-left: -300px; } 45%,60% { margin-left: -600px; } 65%,80% { margin-left: -900px; } 85%,100% { margin-left: -1200px; } } .num{ position:absolute;z-index:10; display:inline-block; right:10px;top:165px; border-radius:100%; background:#f00; width:25px;height:25px; line-height:25px; cursor:pointer; color:#fff; text-align:center; opacity:0.8; } .num:nth-child(2){margin-right:30px} .num:nth-child(3){margin-right:60px} .num:nth-child(4){margin-right:90px} .num:nth-child(5){margin-right:120px} </style> </head> <body> <div id="frame" > <a id="a1" class="num" rel="1">1</a> <a id="a2" class="num" rel="2">2</a> <a id="a3" class="num" rel="3">3</a> <a id="a4" class="num" rel="4">4</a> <a id="a5" class="num" rel="5">5</a> <div id="photos" class="play"> <img src="http://eduppp.cn/images/0/1.jpg" > <img src="http://eduppp.cn/images/0/3.jpg" > <img src="http://eduppp.cn/images/0/4.jpg" > <img src="http://eduppp.cn/images/0/5.jpg" > <img src="http://eduppp.cn/images/0/2.jpg" > <ul id="dis"> <li>中國標誌性建築：天安門</li> <li>中國標誌性建築：東方明珠</li> <li>中國標誌性建築：佈達拉宮</li> <li>中國標誌性建築：長城</li> <li>中國標誌性建築：天壇</li> </ul> </div> </div> </body> </html>
請使用高版本狐火打開，沒寫相容。
animation-delay為負值時 動畫狀態是瀏覽器載入時的已經有了的狀態，相當於提前載入。
註意： 'animation-delay': '-10'+2*rel+'s',
rel是點擊時在HTML屬性上傳來的 全局變數
為什麼乘以 2？
看關鍵幀和動畫載入完成時間。總時間是10S；關鍵幀分為5段，所有10除以5得2。
