最简单的jq轮播图

Posted 2020-10-20 九段刀客

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了最简单的jq轮播图相关的知识，希望对你有一定的参考价值。

 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>

以上是关于最简单的jq轮播图的主要内容，如果未能解决你的问题，请参考以下文章