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>
