轮播无限向上滚动

<!DOCTYPE html>
<html>
     <head>
           <meta charset="UTF-8">
           <title></title>
           <script src="jquery-1.9.0.js" type="text/javascript" charset="utf-8"></script>
           <style type="text/css">
                *{
                     margin: 0;
                     padding: 0;
                }
                li{
                     list-style: none;
                }
                #top{
                     width: 50px;
                     height: 100px;
                     border: 1px solid #f00;
                     margin: 100px auto;
                     line-height: 20px;
                     overflow: hidden;
                     position: relative;
                     /*top: 0;*/
                }
                /*.top{
                     top: 0;
                     position: absolute;
                     left: 0;
                }*/
                /*.top .ul1{
                     position: absolute;
                     left: 0;
                     top: 0;
                }
                .top .ul2{
                     position: absolute;
                     left: 0;
                     top: 180px;
                }*/
           </style>
     </head>
     <body>
           <div id="top">
                <div id="ul1">
                     <ul>
                           <li>11</li>
                           <li>12</li>
                           <li>13</li>
                           <li>14</li>
                           <li>15</li>
                           <li>16</li>
                           <li>17</li>
                           <li>18</li>
                           <li>19</li>
                     </ul>                
                </div>
                <div id="ul2">
                     <ul>
                           <li>11</li>
                           <li>12</li>
                           <li>13</li>
                           <li>14</li>
                           <li>15</li>
                           <li>16</li>
                           <li>17</li>
                           <li>18</li>
                           <li>19</li>
                     </ul>
                </div>
           </div>
           <script type="text/javascript">
                $(function(){
//                   var tops = $(".top").position().top;
//                   console.log(tops);
                     var $top = document.getElementById('top')
                     var $ul1 = document.getElementById('ul1')
                     var $ul2 = document.getElementById('ul2')
//                   console.log($ul2.offsetTop);
//                   console.log($ul2.offsetTop);
//                   console.log($ul1.offsetHeight);
                     function move(){
                           if($ul2.offsetTop - $top.scrollTop <= 0){
                                $top.scrollTop = $top.scrollTop - $ul1.offsetHeight;
                           }else{
                                $top.scrollTop++
                           }
                     }
                     setInterval(function(){
                           move();
                     },60)
                })
           </script>
     </body>
</html>
来源：CSDN
作者：看雪看月亮
链接：https://blog.csdn.net/ya_nan_zhang/article/details/90641689
标签
轮播
top
scrolltop