HTML代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>案例1 轮播图</title> 7 <style type="text/css"> 8 ul{ 9 list-style-type:none; 10 margin:0; 11 padding:0; 12 width:300px; 13 height:300px; 14 border:2px solid #ccc; 15 } 16 li{ 17 width:300px; 18 height:300px; 19 display:none; 20 21 } 22 .show{ 23 display:block; 24 } 25 .hide{ 26 display:none; 27 } 28 </style> 29 <script type="text/javascript" src="../jquery-3.5.1.js"></script> 30 <script src="../js/case403.js"></script> 31 </head> 32 <body onload="start()"> 33 <ul id="imgs"> 34 <li class="show"><img src="../images/image1.jpg"/></li> 35 <li class="hide"><img src="../images/image2.jpg"/></li> 36 <li class="hide"><img src="../images/image3.jpg"/></li> 37 <li class="hide"><img src="../images/image4.jpg"/></li> 38 <li class="hide"><img src="../images/image5.jpg"/></li> 39 </ul> 40 </body> 41 </html> 42 43 44 45 46 </head> 47 <body> 48 49 </body>
js代码：
function start(){ let i=0; window.setInterval(function(){ index = ++i%$("li").length; $("li:visible").hide(); $("li").eq(index).show(); },1000); }