个人博客：
纯CSS3实现模拟焦点轮播效果，支持JQ等扩展各项功能。废话少说，直接贴代码。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"> 5 <meta name="format-detection" content="telephone=no"/> 6 <meta name="apple-mobile-web-app-capable" content="yes"/> 7 <meta charset="UTF-8"> 8 <title>纯CSS焦点轮播</title> 9 <link rel="stylesheet" href="css/index.css"/> 10 </head> 11 <body> 12 <div class="focus_img"> 13 <ul class="img_list"> 14 <li><img src="images/swape1.jpg" alt=""/></li> 15 <li><img src="images/swape2.jpg" alt=""/></li> 16 <li><img src="images/swape3.jpg" alt=""/></li> 17 <li><img src="images/swape4.jpg" alt=""/></li> 18 <li><img src="images/swape5.jpg" alt=""/></li> 19 </ul> 20 <ul class="img_index"> 21 <li class="one">1</li> 22 <li class="two">2</li> 23 <li class="three">3</li> 24 <li class="four">4</li> 25 <li class="five">5</li> 26 </ul> 27 </div> 28 </body> 29 <script src="js/jquery-1.11.3.js"></script> 30 <script src="js/index.js"></script> 31 </html>
接下来是样式代码
1 body { background-color: #f0f0f0; } 2 .focus_img { position: relative; height: 300px; width: 500px; overflow: hidden; margin: auto; border: solid 2px #000000; 3 ul { position: absolute; } 4 .img_list { top: 0; left: 0; -webkit-animation: img_list 10s 2s infinite; 5 li { width: 500px; height: 300px; overflow: hidden; 6 img { height: 300px; width: 500px;} 7 } 8 } 9 .img_index { bottom: 10px;right: 10px; 10 li {float: left; width: 16px; height: 16px; border: solid 1px #cccccc; background-color: #ffffff; color:#000000; text-align: center;line-height: 16px;overflow: hidden;cursor: pointer;margin-right: 2px; } 11 .one { background-color: #000000; color: #ffffff; -webkit-animation: one 10s 2s infinite;} 12 .two { -webkit-animation: two 10s 2s infinite;} 13 .three {-webkit-animation: three 10s 2s infinite;} 14 .four {-webkit-animation: four 10s 2s infinite;} 15 .five {-webkit-animation: five 10s 2s infinite;} 16 } 17 } 18 @-webkit-keyframes img_list { 19 0%{ -webkit-transform: translate(0,0);} 20 10%,20% {-webkit-transform: translate(0,-300px);} 21 30%,40% {-webkit-transform: translate(0,-600px);} 22 50%,60% {-webkit-transform: translate(0,-900px);} 23 70%,80% {-webkit-transform: translate(0,-1200px);} 24 90%,100% {-webkit-transform: translate(0,0);} 25 } 26 27 @-webkit-keyframes one { 28 10%,20%,30%,40%,50%,60%,70%,80%{ background-color: #ffffff; color: #000000;} 29 0%,90%,100%{ background-color: #000000;color: #ffffff;} 30 } 31 @-webkit-keyframes two { 32 0%,30%,40%,50%,60%,70%,80%,90%,100%{ background-color: #ffffff; color: #000000;} 33 10%,20%{ background-color: #000000;color: #ffffff;} 34 } 35 @-webkit-keyframes three { 36 0%,10%,20%,50%,60%,70%,80%,90%,100%{ background-color: #ffffff; color: #000000;} 37 30%,40%{ background-color: #000000;color: #ffffff;} 38 } 39 @-webkit-keyframes four { 40 0%,10%,20%,30%,40%,70%,80%,90%,100%{ background-color: #ffffff; color: #000000;} 41 50%,60%{ background-color: #000000;color: #ffffff;} 42 } 43 @-webkit-keyframes five { 44 0%,10%,20%,30%,40%,50%,60%,90%,100%{ background-color: #ffffff; color: #000000;} 45 70%,80%{ background-color: #000000;color: #ffffff;} 46 }
最后是效果图
欢迎交流指正，谢谢！