轮播图

 

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);
}

 

posted @ 2020-09-24 13:18  ZengZG  Views(77)  Comments(0)  Edit  收藏  举报