个人博客：
纯CSS3实现模拟焦点轮播效果，支持JQ等扩展各项功能。废话少说，直接贴代码。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<meta name="format-detection" content="telephone=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta charset="UTF-8">
<title>纯CSS焦点轮播</title>
<link rel="stylesheet" href="css/index.css" rel="external nofollow" />
</head>
<body>
<div class="focus_img">
<ul class="img_list">
<li><img src="data:images/swape1.jpg" alt=""/></li>
<li><img src="data:images/swape2.jpg" alt=""/></li>
<li><img src="data:images/swape3.jpg" alt=""/></li>
<li><img src="data:images/swape4.jpg" alt=""/></li>
<li><img src="data:images/swape5.jpg" alt=""/></li>
</ul>
<ul class="img_index">
<li class="one">1</li>
<li class="two">2</li>
<li class="three">3</li>
<li class="four">4</li>
<li class="five">5</li>
</ul>
</div>
</body>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/index.js"></script>
</html>
接下来是样式代码
body { background-color: #f0f0f0; }
.focus_img { position: relative; height: 300px; width: 500px; overflow: hidden; margin: auto; border: solid 2px #000000;
ul { position: absolute; }
.img_list { top:; left:; -webkit-animation: img_list 10s 2s infinite;
li { width: 500px; height: 300px; overflow: hidden;
img { height: 300px; width: 500px;}
}
}
.img_index { bottom: 10px;right: 10px;
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; }
.one { background-color: #000000; color: #ffffff; -webkit-animation: one 10s 2s infinite;}
.two { -webkit-animation: two 10s 2s infinite;}
.three {-webkit-animation: three 10s 2s infinite;}
.four {-webkit-animation: four 10s 2s infinite;}
.five {-webkit-animation: five 10s 2s infinite;}
}
}
@-webkit-keyframes img_list {
0%{ -webkit-transform: translate(0,0);}
10%,20% {-webkit-transform: translate(0,-300px);}
30%,40% {-webkit-transform: translate(0,-600px);}
50%,60% {-webkit-transform: translate(0,-900px);}
70%,80% {-webkit-transform: translate(0,-1200px);}
90%,100% {-webkit-transform: translate(0,0);}
} @-webkit-keyframes one {
10%,20%,30%,40%,50%,60%,70%,80%{ background-color: #ffffff; color: #000000;}
0%,90%,100%{ background-color: #000000;color: #ffffff;}
}
@-webkit-keyframes two {
0%,30%,40%,50%,60%,70%,80%,90%,100%{ background-color: #ffffff; color: #000000;}
10%,20%{ background-color: #000000;color: #ffffff;}
}
@-webkit-keyframes three {
0%,10%,20%,50%,60%,70%,80%,90%,100%{ background-color: #ffffff; color: #000000;}
30%,40%{ background-color: #000000;color: #ffffff;}
}
@-webkit-keyframes four {
0%,10%,20%,30%,40%,70%,80%,90%,100%{ background-color: #ffffff; color: #000000;}
50%,60%{ background-color: #000000;color: #ffffff;}
}
@-webkit-keyframes five {
0%,10%,20%,30%,40%,50%,60%,90%,100%{ background-color: #ffffff; color: #000000;}
70%,80%{ background-color: #000000;color: #ffffff;}
}
最后是效果图
欢迎交流指正，谢谢！
