- <style>
- * {
- margin: 0px;
- padding: 0px;
- }
- .wrapp {
- height: 400px;
- border: 1px solid red;
- width: 200px;
- overflow: hidden;
- margin: 200px auto;
- text-align: center;
- }
- li {
- list-style: none;
- color: black;
- font-size: 26px;
- margin-bottom: 10px;
- }
- </style>
- <body>
- <div class='wrapp'>
- <div class='list'>
- <ul>
- <li > 数据一 </li>
- <li > 数据二 </li>
- <li > 数据三 </li>
- <li > 数据四 </li>
- <li > 数据五 </li>
- <li > 数据六 </li>
- <li > 数据七 </li>
- <li > 数据八 </li>
- <li > 数据九 </li>
- <li > 数据十 </li>
- </ul>
- </div>
- <div class='listClone'></div>
- </div>
- </body>
- <script src='js/jquery-1.8.3.min.js'></script>
- <script>
- var wrapp=document.getElementsByClassName('wrapp')[0];
- var list=document.getElementsByClassName('list')[0];
- var listClone=document.getElementsByClassName('listClone')[0];
- listClone.innerhtml=list.innerHTML;
- var time=6;
- var listRoolGo=setInterval(listRool,time)
- function listRool() {
- if (listClone.offsetHeight-wrapp.scrollTop<=0) {
- wrapp.scrollTop-=list.offsetHeight;
- } else {
- wrapp.scrollTop++
- }
- }
- </script>
来源: http://www.bubuko.com/infodetail-2893006.html