js跑马灯效果、横向、纵向滚动效果

比如横向滚动，则在li标签里设置 display: table-cell;滚动效果 transform: translateX(-200px);

<div id="div1" ><ul><li><img src="imgs/Snipaste_2022-11-22_18-13-13.png"></li><li><img src="imgs/Snipaste_2022-11-23_11-31-25.png"></li><li><img src="imgs/Snipaste_2022-11-22_18-13-13.png"></li><li><img src="imgs/Snipaste_2022-11-23_11-31-25.png"></li><li><img src="imgs/Snipaste_2022-11-22_18-13-13.png"></li><li><img src="imgs/Snipaste_2022-11-23_11-31-25.png"></li></ul>
</div><style>
#div1{overflow: hidden;position: absolute; width: 204px;height: 117px;left: 1px;top: 2px;border-radius: 8px;}#div1 ul{position: absolute;left:0;list-style: none;animation: marquee 13s linear infinite;}#div1 ul li{     padding: 1px;/* 纵向滚动 *//* display: inline; *//* 横向滚动 */display: table-cell;width: 202px;height: 117px;}#div1 ul li img{width: 202px;height: 117px;}@keyframes marquee{0% {}100% {/* 横向是translateX，纵向是translateY */transform: translateX(-200px);}
}
</style>