1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="UTF-8">
6 <title></title>
7 <style type="text/css">
8 * {
9 margin: 0px;
10 padding: 0px;
11 list-style: none;
12 }
13
14 div>span {
15 margin-top: 30px;
16 background: #e0e0e0;
17 color: red;
18 font-size: 25px;
19 width: 50px;
20 height: 30px;
21 line-height: 30px;
22 text-align: center;
23 display: inline-block;
24 margin-right: 3px;
25 font-weight: bolder;
26 cursor: pointer;
27 }
28
29 nav {
30 margin-top: 30px;
31 width: 600px;
32 height: 300px;
33
34 overflow: hidden;
35 position: relative;
36 }
37
38 ul {
39 width: 8888px;
40 height: 100%;
41 position: absolute;
42 top: 0px;
43 left: 0px;
44 }
45
46 ul>li {
47 width: 200px;
48 height: 100%;
49 background: #FF6700;
50 float: left;
51 font-size: 40px;
52 color: #fff;
53 text-align: center;
54 line-height: 300px;
55 }
56
57 li:nth-of-type(2) {
58 background: gray;
59 }
60
61 li:nth-of-type(3) {
62 background: red;
63 }
64
65 li:nth-of-type(4) {
66 background: green;
67 }
68
69 li:nth-of-type(5) {
70 background: cornflowerblue;
71 }
72
73 li:nth-of-type(6) {
74 background: gold;
75 }
76 </style>
77 </head>
78
79 <body>
80 <div><span class="left"><</span><span class="right">></span></div>
81 <nav>
82 <ul>
83 <li>AAAA</li>
84 <li>BBBB</li>
85 <li>CCCC</li>
86 <li>DDDD</li>
87 <li>EEEE</li>
88 <li>FFFF</li>
89 </ul>
90 </nav>
91 <script type="text/javascript">
92 var ul = document.querySelector("ul");
93 var left = document.querySelector(".left");
94 var right = document.querySelector(".right");
95
96 var i = 0,
97 timer, timer2,timer3,timer4;
98 LEFT();
99 function LEFT() {
100 clear();
101 function move1() {
102 i -= 40;
103 if(i <= -600) {
104 clearInterval(timer);
105 i = -600;
106 timer4=setTimeout(RIGHT, 5500);
107 }
108 ul.style.left = i + "px";
109 }
110 timer = setInterval(move1, 10)
111 }
112
113 function RIGHT() {
114 clear();
115 function move2() {
116 i += 40;
117 if(i >= 0) {
118 i = 0;
119 clearInterval(timer2);
120 timer3=setTimeout(LEFT, 5500);
121 }
122 ul.style.left = i + "px";
123 }
124 timer2 = setInterval(move2, 10);
125 }
126
127 left.onclick=function(){
128 clear();
129 LEFT();
130
131 }
132 right.onclick=function(){
133 clear();
134 RIGHT();
135
136 }
137 function clear(){
138 if(timer){
139 clearInterval(timer)
140 }
141 if(timer2){
142 clearInterval(timer2)
143 }
144 if(timer3){
145 clearTimeout(timer3)
146 }
147 if(timer4){
148 clearTimeout(timer4)
149 }
150 }
151 </script>
152 </body>
153
154 </html>
时间： 2024-10-25 03:17:39