js特效——自动滚动

Posted 2020-09-27 web_study
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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><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>
以上是关于js特效——自动滚动的主要内容，如果未能解决你的问题，请参考以下文章