纯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 }
最后是效果图
欢迎交流指正，谢谢！
时间： 2024-08-12 00:23:30