主要用到css3中的动画 @keyframes， animation。
布局是外层一个div宽固定，然后overflow hidden 绝对定位，里面的ul 固定定位。通过对ul添加动画来实现效果。具体代码如下
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 </head>
7 <style type="text/css">
8 *{margin: 0;padding: 0;}
9 ul li{list-style: none;}
10 .banner{width: 100%;height: 568px;overflow: hidden;position: relative;}
11 .banner ul{
12 width: 500%;
13 position: absolute;
14 left: 0;
15 top: 0;
16 height: 568px;
17 -webkit-animation:slide 10s linear infinite;
18 }
19 .banner ul li{
20 float: left;
21 width: 20%;
22 height: 568px;
23 }
24 .banner ul li:nth-child(1){background:url(img/1.jpg) center; }
25 .banner ul li:nth-child(2){background:url(img/2.jpg) center; }
26 .banner ul li:nth-child(3){background:url(img/3.jpg) center; }
27 .banner ul li:nth-child(4){background:url(img/4.jpg) center; }
28 .banner ul li:nth-child(5){background:url(img/5.jpg) center; }
29 @-webkit-keyframes slide{
30 0%{left: 0;}
31 20%{left: 0;}
32 21%{left: -100%;}
33 40%{left: -100%;}
34 41%{left: -200%;}
35 60%{left: -200%;}
36 61%{left: -300%;}
37 80%{left: -300%;}
38 81%{left: -400%;}
39 100%{left: -400%;}
40 }
41 .banner:hover ul{-webkit-animation-play-state:paused;}
42 </style>
43 <body>
44 <div class="banner">
45 <ul>
46 <li></li>
47 <li></li>
48 <li></li>
49 <li></li>
50 <li></li>
51 </ul>
52 </div>
53 </body>
54 </html>
时间： 2024-11-08 11:41:33