1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>轮播图</title>
6 <style>
7 .img1,
8 .img2,
9 .img3 {
10 width: 1200px;
11 height: 350px;
12 font-size: 30px;
13 }
14
15 .img1 {
16 background-color: pink;
17 }
18
19 .img2 {
20 background-color: green;
21 display: none;
22 }
23
24 .img3 {
25 background-color: orange;
26 display: none;
27 }
28
29 .banner {
30 display: relative;
31 }
32
33 .banner div {
34 width: 100%;
35 height: 350px;
36 position: absolute;
37 }
38 </style>
39 </head>
40
41 <body>
42 <div class="banner">
43 <div class="img1">0</div>
44 <div class="img2">1</div>
45 <div class="img3">2</div>
46 </div>
47
48 </body>
49 <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
50 <script>
51 $(function(){
52 var i = 0;
53 var maxLength = $('.banner div').length - 1;
54 function play(){
55 i++;
56 if(i> maxLength){
57 i = 0;
58 }
59 $('.banner div').eq(i).fadeIn(1000).siblings().fadeOut(1000);
60 }
61 setInterval(play,3000);
62 })
63 </script>
64 </html>
