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 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>
9 <style>
10 *{
11 padding: 0;
12 margin: 0;
13 }
14 #box{
15 background:red;
16 width:500px;
17 height:200px;
18 margin:0 auto;
19 overflow: hidden;
20 }
21 #box>ul{
22 width: 2000px;
23 height: inherit;
24 position: relative;
25 }
26 #box>ul>li{
27 width: 500px;
28 height: inherit;
29 list-style: none;
30 position:absolute;
31 left:0;
32 top:0;
33 }
34 #box>ul li:nth-child(1){
35 background: green;
36 opacity:1;
37 z-index:1;
38 }
39 #box>ul li:nth-child(2){
40 background: pink;
41 opacity:0;
42 z-index:0;
43 }
44 #box>ul li:nth-child(3){
45 background: lightblue;
46 opacity:0;
47 z-index:0;
48 }
49
50 </style>
51 </head>
52 <body>
53 <div id="box">
54 <ul>
55 <li>你好</li>
56 <li>我很好</li>
57 <li>我很不好</li>
58 </ul>
59 </div>
60 <script>
61 $(function(){
62 var stoptimer = null;
63 var stepIndex = 0;
64 var count = $("#box>ul>li").length;
65 var $ul = $("#box>ul")
66 var $list = $("#box>ul>li")
67 setInterval(function(){
68 stepIndex++;
69 if(stepIndex >=count){
70 stepIndex = 0
71 }
72 $list.eq(stepIndex).animate({
73 "z-index":1,
74 opacity:1
75 },1000)
76 $list.eq(stepIndex).siblings("li").animate({
77 "z-index":0,
78 opacity:0,
79 },1000)
80 },3000)
81 })
82 </script>
83 </body>
84 </html>
