1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>图片滚动</title> 6 </head> 7 <style> 8 #box { 9 width: 100px; 10 border: 1px solid black; 11 height: 500px; 12 overflow: scroll; 13 } 14 15 #box::-webkit-scrollbar { 16 display: none; 17 } 18 19 #ul1 { 20 position: relative; 21 top: -62px; 22 margin: 0px; 23 width: 100px; 24 /*height: 500px;*/ 25 text-align: center; 26 overflow: hidden; 27 background-color: cadetblue; 28 padding: 0px; 29 } 30 31 #ul1 li { 32 display: block; 33 width: 100px; 34 height: 50px; 35 padding: 5px; 36 border: solid 1px black; 37 background-color: darkcyan; 38 list-style: none; 39 line-height: 50px; 40 41 } 42 43 #ul1 li:first-child { 44 animation: 500ms scroll_hide; 45 animation-delay: 1500ms; 46 47 } 48 49 #ul1 li:nth-child(2) { 50 background-color: rebeccapurple; 51 } 52 53 @keyframes scroll_hide { 54 from { 55 height: 50px; 56 } 57 to { 58 height: 0px; 59 padding: 0px; 60 opacity: 0; 61 } 62 } 63 </style> 64 <body> 65 <div id="box"> 66 <ul id="ul1"> 67 <li>test1</li> 68 <li>test2</li> 69 <li>test3</li> 70 <li>test4</li> 71 <li>test5</li> 72 <li>test6</li> 73 <li>test7</li> 74 <li>test8</li> 75 <li>test9</li> 76 <li>test10</li> 77 </ul> 78 </div> 79 </body> 80 <script> 81 let scrollUl = function () { 82 let elementUl = document.getElementById("ul1"); 83 let elements = elementUl.children; 84 setInterval(function () { 85 let tmp = elements[0]; 86 if (tmp != null) { 87 elementUl.removeChild(elements[0]); 88 elementUl.appendChild(tmp); 89 } 90 }, 2000); 91 }() 92 </script> 93 </html>