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>