js特效——自动滚动

  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 class="right">>span>div>
 81         nav>
 82             ul>
 83                 li>AAAAli>
 84                 li>BBBBli>
 85                 li>CCCCli>
 86                 li>DDDDli>
 87                 li>EEEEli>
 88                 li>FFFFli>
 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>