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>
